Owl carousel: display only one image per slide

Question

Today I discovered owl-carousel and I tried to make it work.

I'm trying to make a carousel that goes through dinosaur images. The problem is that 4 dinosaurs appear on one slide (2 in the half-view window of the violin). I wanted to show only 1 for each slide.

I have a violin

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

I tried changing items to 1, but that didn't solve either.

Does anyone know how to solve this?

Help is appreciated.

Answer 1

singleItem property must be true

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

Answer 2

To make a "pan" carousel:

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