title: Owl Carousel Slides all render as one stacked block
body: <p>Below is my code for a very basic owl carousel. It is meant to have only one image / slide displaying at any one time, but at the minute I am ending up with a stack of all these images in a single slide. I'm sure I must be doing something very obviously wrong.</p>
  
  <pre><code>&lt;ul class="showcasecarousel"&gt;
  
      &lt;li class="item"&gt;&lt;img src="img/trackback.png" alt="Some text here"&gt;&lt;/li&gt;
      &lt;li class="item"&gt;&lt;img src="img/trackback.png" alt="Some text here"&gt;&lt;/li&gt;
      &lt;li class="item"&gt;&lt;img src="img/trackback.png" alt="Some text here"&gt;&lt;/li&gt;
  
  &lt;/ul&gt;
  </code></pre>
  
  <p>The JavaScript at the bottom of my HTML file is:</p>
  
  <pre><code>$('.showcasecarousel').owlCarousel({
     navigation : false, // Show next and prev buttons
     slideSpeed : 300,
     paginationSpeed : 400,
     singleItem: true,
     loop: true,
  });
  </code></pre>
  
  <p>And finally, the CSS I have is:</p>
  
  <pre><code>.showcasecarousel .item img{
      display: inline;
      width: 100%;
      height: auto;
  }
  </code></pre>
  
  <p>Both of the CSS and JS files for Owl Carousel and JavaScript have been properly included too - there are other carousels on the same page and they work fine. Any help would be greatly appreciated.</p>