使 owl 个轮播项目居中对齐

Question

我正在使用 owl 轮播，其中图像是通过 PHP 拍摄的，因此我无法预测其中的项目数量，我使用的轮播包含 10 个项目（项目: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 JQuery

$("#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

我建议：

获取 php 中的项目数。
在 html 中使用您的图像打印结果。
将计数分配给 JavaScript 变量。（检查计数是否 > 10 然后 asisgn 10）
将 owlCarousel 函数分配给 owl-example id，并将 count 变量传递给 owlCarousel 对象中的 items。

希望对您有所帮助。

使 owl 个轮播项目居中对齐

make owl carousel items alignment to center

html

css

jquery

owl-carousel