How to make custom dots in owl carousel?
<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>