title: How to make custom dots in owl carousel?
body: <p>I have implemented custom prev next buttons(i ommit css styles for prev next buttons), but havent dots. Who know what is mistake I did?</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>// owl.carousel.css
  
  .owl-controls {
      text-align: center;
  }
  .owl-controls .owl-dot {
      display: inline-block;
  }
  .owl-controls .owl-dot span {
      background-color: #333;
      -webkit-border-radius: 30px;
      -moz-border-radius: 30px;
      border-radius: 30px;
      display: block;
      height: 12px;
      margin: 5px 7px;
      width: 12px;
      filter: Alpha(Opacity=500);/*IE7 fix*/
      opacity: 0.5;
  }
  .owl-controls .owl-dot.active span, .owl-controls .owl-dot:hover span {
      filter: Alpha(Opacity=100);/*IE7 fix*/
      opacity: 1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script&gt;
    $(document).ready(function(){
       $('.owl-carousel').owlCarousel({
        loop:true,
        margin:10,
        nav:true,
        navText: ["&lt;img src='prevArrow.png'&gt;","&lt;img src='nextArrow.png'&gt;"],
        responsive:{
           0:{
               items:1
           },
           600:{
               items:1
           },
           1000:{
               items:1
           }
        }
     })
    });
   &lt;/script&gt;
  
  &lt;div class="owl-carousel"&gt;
     &lt;img src="lylka.png" alt=""&gt;
     &lt;img src="lylka.png" alt=""&gt;
     &lt;img src="lylka.png" alt=""&gt;
     &lt;img src="lylka.png" alt=""&gt;
     &lt;img src="lylka.png" alt=""&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>