2015-05-27 11 views
6

Dziś odkryłem owl-carousel i próbowałem go uruchomić.Sowa-karuzela: wyświetlanie tylko jednego obrazu na slajdzie

Próbuję zrobić karuzelę, która przechodzi przez obrazy dinozaurów. Problem polega na tym, że 4 dinozaury pojawiają się na tym samym slajdzie (2 w oknie pół-wielkości skrzypiec). Chciałem pokazać tylko 1 na slajd.

mam ryba

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; 
} 

Próbowałem zmienić items na 1, ale to też nie rozwiązało.

Czy ktoś wie, jak rozwiązać ten problem?

Pomoc jest doceniana.

Odpowiedz

14

singleItem nieruchomość musi być prawdą

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

Dzięki, że to dla mnie rozwiązany –

+3

Ciekawe, ale to nie działa dla mnie. Używam wtyczki w dokładnie taki sam sposób, z tą różnicą, że obrazy mają szerokość płynu: 100%. Czy masz jakieś pomysły, dlaczego? – Daniela

+1

Wygląda na to, że nie działa on w wersji 2.x –

0

Aby karuzeli "Slide":

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