web-dev-qa-db-ja.com

フクロウカルーセル：スライドごとに1つの画像のみを表示

今日、私はowl-carouselを発見し、それを機能させるよう努めています。

私は恐竜の画像を循環するカルーセルを作ろうとしています。問題は、4つの恐竜が同じスライドに表示されることです（フィドルのハーフサイズウィンドウに2つ）。スライドごとに1つだけ表示したかった。

私はフィドルを持っています

http://jsfiddle.net/8bJUc/318/

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に変更してみましたが、それでも解決しませんでした。

誰かがこれを解決する方法を知っていますか？

助けていただければ幸いです。

javascriptjqueryhtmlcssowl-carousel
9
Richard Hamilton

singleItemプロパティはtrueである必要があります

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

カルーセルを「スライド」させるには：

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