使猫头鹰轮播项目与中心对齐

Question

我正在使用猫头鹰轮播，其中的图像是通过 PHP 拍摄的，所以我无法预测其中的项目数量，我正在使用包含 10 个项目的轮播(items：10(。 有时返回的 PHP 输出将包含较少的图像 (1,2,3..( 那时图像向左对齐，但我希望它位于中心。 我的代码如下

.html

<div id="owl-example" class="owl-carousel">
<div><img src="Images/image1.png class="br" ></div>
<div><img src="Images/image1.png class="br" ></div>
</div>

实际代码是php返回的输出，这里我只写它的html 杰奎里

$("#owl-example").owlCarousel({
// Most important owl features
items : 10,
itemsDesktop : [1199,4],
itemsDesktopSmall : [980,3],
itemsTablet: [768,2],
itemsTabletSmall: false,
itemsMobile : [479,1],
singleItem : false,
//Basic Speeds
slideSpeed : 200,
paginationSpeed : 800,
rewindSpeed : 1000,
//Pagination
pagination : true,
paginationNumbers: false,
// Responsive 
responsive: true,
responsiveRefreshRate : 200,
responsiveBaseWidth: window,
// CSS Styles
baseClass : "owl-carousel",
theme : "owl-theme",
//Lazy load
lazyLoad : false,
lazyFollow : true,
//Auto height
autoHeight : false,
autoWidth : true,
loop:true,
center:true,
//JSON 
jsonPath : false, 
jsonSuccess : false,
//Mouse Events
mouseDrag : true,
touchDrag : true,
stagePadding: 50,
loop:true,
margin:10,
nav:true,
//Transitions
transitionStyle : false,
// Other
addClassActive : false,
//Callbacks
beforeInit: false, 
afterInit: false, 
beforeMove: false, 
afterMove: false,
afterAction: false,
startDragging : false
})

.CSS

.owl-carousel .owl-wrapper:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
/* display none until init */
.owl-carousel{
display: none;
position: relative;
width: 100%;
-ms-touch-action: pan-y;
}
.owl-carousel .owl-wrapper{
display: none;
position: relative;
-webkit-transform: translate3d(0px, 0px, 0px);
}
.owl-carousel .owl-wrapper-outer{
overflow: hidden;
position: relative;
width: 100%;
}
.owl-carousel .owl-wrapper-outer.autoHeight{
-webkit-transition: height 500ms ease-in-out;
}
.owl-carousel .owl-item{
float: left;
}
.owl-controls .owl-page,.owl-controls .owl-buttons div{
cursor: pointer;
}
.owl-controls {
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* fix */
.owl-carousel  .owl-wrapper,.owl-carousel  .owl-item{
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
}

Answer 1

我建议：

1. 获取以 php 为单位的项目计数。
   
用
2. html 格式打印结果和您的图像.
   
3. 将计数分配给 JavaScript 变量。(检查计数是否> 10，然后 asisgn 10(
   
4. 将 owlCarousel 函数分配给owl-exampleid，并将计数变量传递给 owlCarousel 对象中的items。

希望这对您有所帮助。