2015-05-27 10 views
6

Heute habe ich owl-carousel entdeckt und ich habe versucht, es zur Arbeit zu bringen.Owl-Karussell: Anzeige nur eines Bildes pro Folie

Ich versuche ein Karussell zu machen, das Bilder von Dinosauriern durchläuft. Das Problem ist, dass 4 Dinosaurier auf der gleichen Folie erscheinen (2 im fidel halbgroßen Fenster). Ich wollte nur 1 pro Folie zeigen.

Ich habe eine Geige

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

Ich versuchte, items zu 1 zu ändern, aber das hat es auch nicht gelöst.

Weiß jemand, wie man das löst?

Hilfe ist willkommen.

Antwort

14

singleItem Eigenschaft muss wahr

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

Danke, dass es für mich gelöst –

+3

Interessant, aber es für mich nicht funktioniert. Ich benutze das Plugin auf genau die gleiche Weise mit dem einzigen Unterschied, dass die Bilder flüssige Breite haben: 100%. Hast du irgendwelche Ideen warum? – Daniela

+1

Es scheint nicht auf 2.x zu arbeiten –

0

sein, um das Karussell „slide“ zu machen:

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