Question

我正在使用通过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。

希望这可以帮助你。

将猫头鹰旋转木马项目对齐到中心

1 个答案: