title: Owlcarousel2 "dots:true" not working?
body: <p>I am trying to make a carousel using the owl-carousel plugin but I am having a problem showing the dots. Dots are not being shown despite they are enabled on the javascript. Is it the problem with owl carousel 2? I have tried adding owl-dots class inside the owl-carousel class. It does produce some result but one extra dot is being shown.Here is the fiddle for you :<a href="https://jsfiddle.net/aoa9a457/" rel="nofollow noreferrer">https://jsfiddle.net/aoa9a457/</a>
  HTML:</p>
  
  <pre><code>    &lt;div class="container-fluid"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-12"&gt;
                  &lt;div id="testimonial-slides" class="owl-carousel owl-theme"&gt;
                          &lt;div class="testmonial-slide-single-item text-center"&gt;
                              &lt;img src="assets/image.jpg" alt=""&gt;
                              &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, excepturi?&lt;/p&gt;
                              &lt;h5&gt;Sabal Parajuli&lt;span&gt;Infotech&lt;/span&gt;&lt;/h5&gt;
                          &lt;/div&gt;
                          &lt;div class="testmonial-slide-single-item text-center"&gt;
                                  &lt;img src="assets/image.jpg" alt=""&gt;
                                  &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, excepturi?&lt;/p&gt;
                                  &lt;h5&gt;Sabal Parajuli&lt;span&gt;Infotech&lt;/span&gt;&lt;/h5&gt;
                          &lt;/div&gt;
                          &lt;div class="testmonial-slide-single-item text-center"&gt;
                                  &lt;img src="assets/image.jpg" alt=""&gt;
                                  &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, excepturi?&lt;/p&gt;
                                  &lt;h5&gt;Sabal Parajuli&lt;span&gt;Infotech&lt;/span&gt;&lt;/h5&gt;
                          &lt;/div&gt;
                  &lt;/div&gt;  
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>CSS( I am just going to show of owl-carousel)</p>
  
  <pre><code>.owl-carousel .owl-item img{
      display: block;
      width:160px;
  }
  
  .owl-dots {
      text-align: center;
      position: fixed;
      bottom: 5px;
      width: 100%;
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      -ms-backface-visibility: hidden;
      backface-visibility: hidden;
  }
  
  .owl-dot {
      border-radius: 50px;
      height: 10px;
      width: 10px;
      display: inline-block;
      background: rgba(127,127,127, 0.5);
      margin-left: 5px;
      margin-right: 5px;
  }
  
  .owl-dot.active {
      background: rgba(127,127,127, 1);
  }
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>(function ($) {
  $(document).ready(function() {
      $("#testimonial-slides").owlCarousel({
        items :4,
        margin: 10,
        loop: true,
        autoplay: true,
        smartSpeed: 1000,
        dots: true,
        center:true,
        responsive:{
          0:{
              items:1
          },
          600:{
              items:3
          }
        }
      });
    });
  }(jQuery));
  </code></pre>