title: owlcarousel - dots do not appear
body: <p>I am working on a project and as my knowledge in javascript are very limited, I decided to use <code>owlcarousel</code>. everything was working fine but now I am facing a problem.</p>
  
  <p>I have set the dots to true but they do not appear. My work so far is the following:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
   width: 90%;
   margin: 0 auto;
  }
  
  /*Text over image*/
  .item {
   width: 100%;
  }
  
  .item img {
     display: block;
     max-width:100%;
  }
  
  
  /*Carousel Nav Buttons*/
  
  .carousel-nav-left{
      height: 30px;
      font-size: 30px;
      position: absolute;
      top: 0%;
      bottom: 0%;
      margin: auto 0;
      margin-left: -40px;
  }
  
  .carousel-nav-right{
      height: 30px;
      font-size: 30px;
      position: absolute;
      top: 0%;
      bottom: 0%;
   right: 0%;
      margin: auto 0;
      margin-right: -40px;
  }
  
  
  @media (max-width: 700px) {
   
   .carousel-nav-left{
    margin-left: -30px;
   }
  
   .carousel-nav-right{
    margin-right: -30px;
   }
   
   .container {
    width: 85%;
   }
  }
  
  @media (max-width: 410px) {
   
   .carousel-nav-left{
    margin-left: -25px;
   }
  
   .carousel-nav-right{
    margin-right: -25px;
   }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;title&gt;owlcarousel&lt;/title&gt;
    &lt;meta charset="UTF-8" /&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;link rel="stylesheet" type="text/css" href="css/style.css" /&gt;
    &lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.css" /&gt;
    &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"&gt;
      &lt;/head&gt;
   
      &lt;body&gt;
    &lt;div class="container"&gt;
     &lt;div class="carousel"&gt;
     
      &lt;div class="item"&gt;
       &lt;img src="http://placehold.it/350x250"  alt="" /&gt;
      &lt;/div&gt;
      
      &lt;div class="item"&gt;
       &lt;img src="http://placehold.it/350x250"  alt="" /&gt;
      &lt;/div&gt;
      
      &lt;div class="item"&gt;
       &lt;img src="http://placehold.it/350x250"  alt="" /&gt;
      &lt;/div&gt;
      
      &lt;div class="item"&gt;
       &lt;img src="http://placehold.it/350x250"  alt="" /&gt;
      &lt;/div&gt;
      
      &lt;div class="item"&gt;
       &lt;img src="http://placehold.it/350x250"  alt="" /&gt;
      &lt;/div&gt;
      
      &lt;div class="item"&gt;
       &lt;img src="http://placehold.it/350x250"  alt="" /&gt;
      &lt;/div&gt;
      
     &lt;/div&gt;
    &lt;/div&gt;
    &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"&gt;&lt;/script&gt;
    &lt;script&gt;
     (function($){
   
      $('.carousel').owlCarousel({
       items: 4,
       loop:true,
       margin:10,
       nav:true,
       navText: ["&lt;span class='carousel-nav-left'&gt;&lt;i class='fa fa-chevron-left'&gt;&lt;/i&gt;&lt;/span&gt;","&lt;span class='carousel-nav-right'&gt;&lt;i class='fa fa-chevron-right'&gt;&lt;/i&gt;&lt;/span&gt;"],
       dots: true,
       paginationSpeed: 300,
       rewindSpeed: 400,
       responsive:{
        0:{
         items:1
        },
        490:{
         items:2
        },
        770:{
         items:3
        },
        1200:{
         items:4
        },
        1500:{
         items:5
        }
       }
      })
      
     })(jQuery);
    &lt;/script&gt;
   &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Please let me know how I can fix this issue </p>