title: Owl-carousel: Displaying only one image per slide
body: <p>Today I discovered <code>owl-carousel</code> and I have been trying to get it to work.</p>
  
  <p>I'm trying to make a carousel that cycles through images of dinosaurs. The problem is that 4 dinosaurs show up on the same slide(2 in the fiddle half-sized window). I wanted only 1 to show up per slide.</p>
  
  <p>I have a fiddle</p>
  
  <p><a href="http://jsfiddle.net/8bJUc/318/" rel="noreferrer">http://jsfiddle.net/8bJUc/318/</a></p>
  
  <p>JavaScript</p>
  
  <pre><code>&lt;script&gt;
      $(document).ready(function(){
          $("#dino-example").owlCarousel({
              items: 5
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="dino-example" class="dino-carousel"&gt;
    &lt;div class="item"&gt;
      &lt;img src="http://johntomsett.files.wordpress.com/2014/03/14525_1_v12_tp.jpg" alt="dinosaur1"&gt;&lt;/img&gt;
    &lt;/div&gt;
    &lt;div class="item"&gt;
      &lt;img src="http://images.clipartpanda.com/t-rex-dinosaur-clip-art-T-Rex-Dinosaur_1.png" alt="dinosaur2"&gt;&lt;/img&gt;
    &lt;/div&gt;
    &lt;div class="item"&gt;
      &lt;img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQbuwkU3kDpr4rByYQ3ydbTPv6zP1L0yhrKB00fa5YhkY0i9WKFWA" alt="dinosaur3"&gt;&lt;/img&gt;
    &lt;/div&gt;
    &lt;div class="item"&gt;
      &lt;img src="http://content.animalnewyork.com/wp-content/uploads/new-dinosaur-nasutoceratops.jpg" alt="dinosaur4"&gt;&lt;/img&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>img {
    height: 300px;
    width: 300px;
  }
  </code></pre>
  
  <p>I tried changing <code>items</code> to 1, but that didn't solve it either.</p>
  
  <p>Does anyone know how to solve this?</p>
  
  <p>Help is appreciated.</p>