title: My owl Carousel is not working
body: <p>I tried this given below code but the images is shown in list view.  Here i have tried changing everything like i added jquery code of loop and all but nothing worked.</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;link rel="stylesheet" href="OwlCarousel2-2.2.0/dist/assets/owl.carousel.min.css"&gt;
  &lt;link rel="stylesheet" href="OwlCarousel2-2.2.0/dist/assets/owl.theme.default.min.css"&gt;
  &lt;link rel="stylesheet" href="style.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div class="owl-carousel sliderImgs owl-loaded"&gt;
          &lt;div class="item"&gt;&lt;img src="images/1.jpg"&gt;&lt;/div&gt;
          &lt;div class="item"&gt;&lt;img src="images/2.jpg"&gt;&lt;/div&gt;
          &lt;div class="item"&gt;&lt;img src="images/3.jpg"&gt;&lt;/div&gt;
          &lt;div class="item"&gt;&lt;img src="images/4.jpg"&gt;&lt;/div&gt;
          &lt;div class="item"&gt;&lt;img src="images/5.jpg"&gt;&lt;/div&gt;
          &lt;div class="item"&gt;&lt;img src="images/6.jpg"&gt;&lt;/div&gt;
          &lt;div class="owl-controls"&gt;
              &lt;div class="owl-nav"&gt;
                  &lt;div class="owl-prev"&gt;prev&lt;/div&gt;
                  &lt;div class="owl-next"&gt;next&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="owl-dots"&gt;
                  &lt;div class="owl-dot active"&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;
                  &lt;div class="owl-dot"&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;
                  &lt;div class="owl-dot"&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;script src="jquery/jquery-3.1.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="OwlCarousel2-2.2.0/dist/owl.carousel.min.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is the js file</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function(){
   $('.owl-carousel').owlCarousel({
  loop:true,
  margin:10,
  nav:true,
  responsive:{
      0:{
          items:1
      },
      600:{
          items:3
      },
      1000:{
          items:5
      }
  }
  });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Here is the css file</p>
  
  <pre><code>img
  {
  /*display: block;*/
  height: 50%;
  width: 50%;
  }
  </code></pre>
  
  <p>Any suggestions would be appreciated. Thanks</p>