выровнять совы по карусели - PullRequest
Новая
       10

выровнять совы по карусели

0 голосов
/ 02 мая 2018

Я использую карусель сов, в которой изображения принимаются через 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);
}

1 Ответ

0 голосов
/ 04 мая 2018

Я бы предложил:

  1. Получить количество предметов в php.
  2. Распечатайте результат в формате HTML с вашими изображениями.
  3. Назначить счетчик переменной JavaScript. (проверьте, если счет> 10, затем введите 10)
  4. Назначьте функцию owlCarousel для owl-example id и передайте переменную count в items в объекте owlCarousel.

Надеюсь, это поможет вам.

...