Owl-轮播：每张幻灯片只显示一张图片

Question

今天我发现了 owl-carousel，我一直在努力让它发挥作用。

我正在尝试制作一个循环显示恐龙图像的旋转木马。问题是 4 只恐龙出现在同一张幻灯片上（2 只在 fiddle 半尺寸 window 中）。我希望每张幻灯片只显示 1 个。

我有一个fiddle

JavaScript

<script>
    $(document).ready(function(){
        $("#dino-example").owlCarousel({
            items: 5
        });
    });
</script>

HTML

<div id="dino-example" class="dino-carousel">
  <div class="item">
    <img src="http://johntomsett.files.wordpress.com/2014/03/14525_1_v12_tp.jpg" alt="dinosaur1"></img>
  </div>
  <div class="item">
    <img src="http://images.clipartpanda.com/t-rex-dinosaur-clip-art-T-Rex-Dinosaur_1.png" alt="dinosaur2"></img>
  </div>
  <div class="item">
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQbuwkU3kDpr4rByYQ3ydbTPv6zP1L0yhrKB00fa5YhkY0i9WKFWA" alt="dinosaur3"></img>
  </div>
  <div class="item">
    <img src="http://content.animalnewyork.com/wp-content/uploads/new-dinosaur-nasutoceratops.jpg" alt="dinosaur4"></img>
  </div>
</div>

CSS

img {
  height: 300px;
  width: 300px;
}

我尝试将 items 更改为 1，但这也没有解决问题。

有人知道怎么解决吗？

感谢帮助。

Answer 1

singleItem 属性需要为真

$(document).ready(function() {
      $("#dino-example").owlCarousel({
            items: 5,
            singleItem: true
        });
    });

Answer 2

制作轮播"slide":

$(document).ready(function() {
  $("#dino-example").owlCarousel({
    singleItem: true,
    autoPlay: 3000
  });
});

Answer 3

在轮播设置中设置 singleItem: true，并将“owl-item”class 的 max-width 和 max-height 设置为取消设置

对我有用

Owl-轮播：每张幻灯片只显示一张图片

Owl-carousel: Displaying only one image per slide

html

javascript

css

jquery

owl-carousel