title: Owl Carousel slides appear all as one slide
body: <p>i have a problem with owl carousel. i want to have a one slide owl carousel but all my images appear as one slide vertically aligned above each other and not horizontally as the slider direction goes.
  below i'll provide u with code and screenshots:</p>
  
  <pre><code>&lt;div id="owl-demo" class="projects-slider owl-carousel owl-theme"&gt;
  
      &lt;div class="item"&gt;&lt;img src="img/lisi1.jpg" alt="lisi"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;img src="img/lisi2.jpg" alt="lisi"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;img src="img/lisi3.jpg" alt="lisi"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;img src="img/lisi3.jpg" alt="lisi"&gt;&lt;/div&gt;
  
  
  
      &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.owl-carousel .item img {
      display:block;
      width:100%;
      height:auto;
  
  
  
  }
  
  .owl-carousel .item {
      margin:0px;
  
  }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$(document).ready(function() {
  
    $('.projects-slider').owlCarousel({
  
        navigation : true, // Show next and prev buttons
        slideSpeed : 300,
        paginationSpeed : 400,
        singleItem:true,
        pagination: true,
        items: 1,
  
  
    });
  
  });
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/ER8fc.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ER8fc.jpg" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/8ra0P.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8ra0P.jpg" alt="enter image description here"></a></p>