Owl Carousel, отображающая несколько элементов на мобильном телефоне

Я разрабатываю сайт и для отображения некоторых отзывов я использую карусель совы для их отображения. Прямо сейчас на рабочем столе все выглядит нормально и безупречно.

Однако на мобильных устройствах вместо одного обзора по горизонтали по какой-то причине отображаются 4 обзора по вертикали.

В моем js я указал items: 1, но мобильный телефон, похоже, не соответствует требованиям. я тоже пробовал

@media screen and (min-width: 768px) and (max-width: 1024px) {
  #owl-client-reviews .review p {
      width: 100% !important;
  }
}

чтобы узнать, могу ли я изменить ширину на мобильном дисплее.

Вот мой код:

html (всего в карусели 10 элементов)

  <div id="owl-client-reviews" class="owl-carousel owl-theme">
      <div class="review">
           <p>
             "client review"
            </p>
            <br>
       <h4><span class="name">Client</span>  <span class="review">Review</span> </h4>
   </div>

CSS

 #clients-reviews .review p{
    font-family: 'PT Serif Caption', serif;
    color: black;
    font-size: 18px;
    padding: 20px;
}

#clients-reviews .review span.name span.post{
    color: #ed1f24;
}

#clients-reviews .owl-theme .owl-controls .owl-nav [class*=owl-] {
    background: transparent;
    color: #ffffff;
    border: 2px solid  #fed136;
    font-size: 14px;
    padding-bottom: 10px;
    line-height: 14px;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  #owl-client-reviews .review p {
      width: 100% !important;
  }
}

JS

$(document).ready(function() {

 $("#owl-client-reviews").owlCarousel({
    items: 1,
    loop: true,
    autoHeight: false,
    autoHeightClass: 'owl-height',
    dots: false,
    navigation: true,
    navigationText:[
        "<i class='fa fa-angle-left fa-2x' style='color:black;'></i>",
        "<i class='fa fa-angle-right fa-2x' style='color:black;'></i>"
    ]
 });
});

Кто-нибудь видит что-то, что я делаю неправильно? Я не уверен, почему он не отображает только 1 элемент на мобильном телефоне/планшете. Любая помощь будет оценена по достоинству.


html css owl-carousel
person user3749994    schedule 22.10.2014    source источник
comment
owlgraphic.com/owlcarousel/demos/one.html — эта опция отсутствует, и вам не нужен css.   -  person Christina    schedule 22.10.2014
comment
@Кристина, спасибо, сработало! Если вы хотите поставить это как ответ, я отмечу его как правильный.   -  person user3749994    schedule 22.10.2014

Ответы (1)


arrow_upward
1
arrow_downward

Вам не хватает опции JavaScript owlCarousel singleItem:true. Вот так:

 $("#owl-client-reviews").owlCarousel({
     singleItem:true,
     items: 1,
     loop: true,
     autoHeight: false,
     autoHeightClass: 'owl-height',
     dots: false,
     navigation: true,
     navigationText:[
    "<i class='fa fa-angle-left fa-2x' style='color:black;'></i>",
    "<i class='fa fa-angle-right fa-2x' style='color:black;'></i>"
]

});

Добавление singleItem заставляет карусель отображать только один контейнер за раз.

person Community    schedule 30.12.2014