Question

我正在开发一个网站并展示一些推荐书，我正在使用猫头鹰旋转木马来展示它们。现在桌面上的一切看起来都很好而且完美无瑕。

然而，在移动设备上，而不是水平显示一个评论，无论出于何种原因，垂直显示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会强制轮播一次只显示一个容器。

猫头鹰轮播在移动设备上显示多个项目

1 个答案: