html - 在移动设备上显示多个元素的 Owl Carousel

Question

我正在开发一个站点并显示一些推荐，我正在使用 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 个元素。任何帮助，将不胜感激。

Answer 1

您缺少 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 会强制轮播一次只显示一个容器。