Owlcarousel2 "dots:true" not working?

Question

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 :https://jsfiddle.net/aoa9a457/ HTML:

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div id="testimonial-slides" class="owl-carousel owl-theme">
                        <div class="testmonial-slide-single-item text-center">
                            <img src="assets/image.jpg" alt="">
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, excepturi?</p>
                            <h5>Sabal Parajuli<span>Infotech</span></h5>
                        </div>
                        <div class="testmonial-slide-single-item text-center">
                                <img src="assets/image.jpg" alt="">
                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, excepturi?</p>
                                <h5>Sabal Parajuli<span>Infotech</span></h5>
                        </div>
                        <div class="testmonial-slide-single-item text-center">
                                <img src="assets/image.jpg" alt="">
                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, excepturi?</p>
                                <h5>Sabal Parajuli<span>Infotech</span></h5>
                        </div>
                </div>  

            </div>
        </div>
    </div>

CSS( I am just going to show of owl-carousel)

.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);
}

Javascript

(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));

Solution 1

'owl-dots disabled' class can also show if you do not have enough items to allow the function of the dots.

It seems in your example you have set in the owl carousel config to 'items :4' but only have 3 HTML elements to 'carousel'

$(document).ready(function() {
    $("#testimonial-slides").owlCarousel({
      items :4, <<
      margin: 10,
      loop: true,
      autoplay: true,
      smartSpeed: 1000,
      center:true,
      responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        }
      },
      onInitialized:setDots,
      onChanged:setDots
    });
  });
}(jQuery));

This may be just your HTML markup but going by your example code this would display the 'owl-dots disabled' class as there aren't enough items to cycle.

Solution 2

I couldn't debug why your dots aren't appearing... that been said you can use this work around that removes the disabled class from your DOM, which is currently hiding them. with css you can fix your dots style...

(function ($) {

function setDots(){
  $("#testimonial-slides .owl-dots").removeClass('disabled');
}

$(document).ready(function() {
    $("#testimonial-slides").owlCarousel({
      //items :4,
      margin: 10,
      loop: true,
      autoplay: true,
      smartSpeed: 1000,
      center:true,
      responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        }
      },
      //onInitialized:setDots,
      //onChanged:setDots
    });
  });
}(jQuery));

.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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div id="testimonial-slides" class="owl-carousel owl-theme">
                        <div class="testmonial-slide-single-item text-center">
                            <img src="assets/image.jpg" alt="">
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, excepturi?</p>
                            <h5>Sabal Parajuli<span>Infotech</span></h5>
                        </div>
                        <div class="testmonial-slide-single-item text-center">
                            <img src="assets/image.jpg" alt="">
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, excepturi?</p>
                            <h5>Sabal Parajuli<span>Infotech</span></h5>
                        </div>
                        <div class="testmonial-slide-single-item text-center">
                            <img src="assets/image.jpg" alt="">
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, excepturi?</p>
                            <h5>Sabal Parajuli<span>Infotech</span></h5>
                        </div>
                        <div class="testmonial-slide-single-item text-center">
                            <img src="assets/image.jpg" alt="">
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, excepturi?</p>
                            <h5>Sabal Parajuli<span>Infotech</span></h5>
                        </div>
                        <div class="testmonial-slide-single-item text-center">
                                <img src="assets/image.jpg" alt="">
                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, excepturi?</p>
                                <h5>Sabal Parajuli<span>Infotech</span></h5>
                        </div>
                        <div class="testmonial-slide-single-item text-center">
                                <img src="assets/image.jpg" alt="">
                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, excepturi?</p>
                                <h5>Sabal Parajuli<span>Infotech</span></h5>
                        </div>
                </div>  

            </div>
        </div>
    </div>

EDITION As suggested @navigator you are setting 3 elements and declaring four, if you add more elements and set the default configuration you will see the dots appearing...

Comments

[Anant - Alive to die]

any error you are getting in your browser console? Also can you create a working example link of your problem, so that we can check (use your original code to create the link)

[Unity Hour]

@Alive to Die No error at all but when I inspect I can see the element owl-dots with added class disabled

[Anant - Alive to die]

May be some CSS are hiding those dots, or may be some jQuery code added a disable class on those dots. Impossible to say correct cause untill we see a running code

[Unity Hour]

@Alive to Die Check the fiddle