owlcarousel - dots do not appear

Question

I am working on a project and as my knowledge in javascript are very limited, I decided to use owlcarousel. everything was working fine but now I am facing a problem.

I have set the dots to true but they do not appear. My work so far is the following:

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>owlcarousel</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="css/style.css" />
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.css" />
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
    </head>
 
    <body>
  <div class="container">
   <div class="carousel">
   
    <div class="item">
     <img src="http://placehold.it/350x250"  alt="" />
    </div>
    
    <div class="item">
     <img src="http://placehold.it/350x250"  alt="" />
    </div>
    
    <div class="item">
     <img src="http://placehold.it/350x250"  alt="" />
    </div>
    
    <div class="item">
     <img src="http://placehold.it/350x250"  alt="" />
    </div>
    
    <div class="item">
     <img src="http://placehold.it/350x250"  alt="" />
    </div>
    
    <div class="item">
     <img src="http://placehold.it/350x250"  alt="" />
    </div>
    
   </div>
  </div>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
  <script>
   (function($){
 
    $('.carousel').owlCarousel({
     items: 4,
     loop:true,
     margin:10,
     nav:true,
     navText: ["<span class='carousel-nav-left'><i class='fa fa-chevron-left'></i></span>","<span class='carousel-nav-right'><i class='fa fa-chevron-right'></i></span>"],
     dots: true,
     paginationSpeed: 300,
     rewindSpeed: 400,
     responsive:{
      0:{
       items:1
      },
      490:{
       items:2
      },
      770:{
       items:3
      },
      1200:{
       items:4
      },
      1500:{
       items:5
      }
     }
    })
    
   })(jQuery);
  </script>
 </body>
</html>

Please let me know how I can fix this issue

Hi, is this live somewhere? A link would really help us to investigate. Thanks — Danny Mahoney, Apr 24 '16 at 13:40
Possible duplicate of [How come dots/navigation buttons are not visiable using owlcarousel?](http://stackoverflow.com/questions/27405929/how-come-dots-navigation-buttons-are-not-visiable-using-owlcarousel) — Danny Mahoney, Apr 24 '16 at 13:43

score 66 · Answer 1 · answered Feb 15 '17 at 11:46

I also faced the same problem while using Owl slider for the first time on my webpage. I could not see the dots navigation and I thought to myself this may be a bug and decided to do some investigation.

I figured later that there are 2 css files required to be included. One is the own-carousel.min.css and the other is owl.theme.default.min.css. After this the container div should have the owl-carousel and owl-theme class in their class list. For e.g:

<div id="slider" class="owl-carousel owl-theme">
        <img src="/dist/assets/img1.jpg" /> 
        <img src="/dist/assets/img2.jpg" /> 
        <img src="/dist/assets/img3.jpg" /> 
        <img src="/dist/assets/img4.jpg" />
</div>

Hope this helps for people who are facing this issue later.

score 28 · Answer 2 · edited May 15 '17 at 21:28

28

Classes owl-carousel and owl-theme on main container are necessary for the dots to appear.

edited May 15 '17 at 21:28

coorasse

5,278
1
34
45

answered May 15 '17 at 21:11

Kevin Vincendeau

281
3
3

Danny Mahoney · Accepted Answer · 2019-03-16T09:38:13.673

Ensure that you have included all of the necessary resources:

jquery-2.1.1.min.js
owl.carousel.min.js
owl.carousel.min.css

Also, make sure your CSS includes the appropriate owl-page and owl-controls

Here is one example of vital CSS code:

.owl-theme .owl-controls .owl-page {
    display: inline-block;
}
.owl-theme .owl-controls .owl-page span {
    background: none repeat scroll 0 0 #869791;
    border-radius: 20px;
    display: block;
    height: 12px;
    margin: 5px 7px;
    opacity: 0.5;
    width: 12px;
}

As seen in This JSFiddle.

Note that if you remove the dots: true from the JSFiddle code (and run it) the pagination "dots" still display. However, if you remove the above CSS, the dots do not display.

Additional Answer

As this is the accepted answer I will add another potential fix as provided by @Kevin Vincendeau and brought to attention by @Amr Ibrahim in the comments.

Check to make sure your HTML is including all of the necessary classes. Such as owl-carousel and owl-theme on the main container.

Please check the other answers and add this part . ` Classes owl-carousel and owl-theme on main container are necessary for the dots to appear. ` — Amr Ibrahim, Aug 21 '17 at 12:02

Ramin Bateni · Answer 4 · 2019-03-16T13:20:29.507

The point was the lack of the owl-theme class in your code!

Include CSS & JS resources

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

Set up your HTML

<div class="owl-carousel owl-theme">
  <div> Content 1 </div>
  <div> Content 2</div>
  <div> Content 3</div>
  <div> Content 4</div>
  <div> Content 5</div>
  <div> Content 6</div>
  <div> Content 7</div>
</div>

Note: if you dose not include the owl-theme class in the parent Div then the Dots dose not appear to you. So it is necessary to make them visible to end users.

Call the plugin

Now call the Owl initializer function and your carousel is ready.

$(function(){
  $(".owl-carousel").owlCarousel();
});

Demo:

$(function(){
    $(".owl-carousel").owlCarousel();        
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
    
<!-- Set up your HTML -->
<div class="owl-carousel owl-theme">
  <div> Content 1 </div>
  <div> Content 2</div>
  <div> Content 3</div>
  <div> Content 4</div>
  <div> Content 5</div>
  <div> Content 6</div>
  <div> Content 7</div>
</div>

score 1 · Answer 5 · answered Mar 16 '21 at 23:17

1

Please note that the Owl Carousel dots will only show up when you have enough items.

Forexample, if you show 3 items at the same time, the dots will only show up if there is 4 or more items in that carousel.

answered Mar 16 '21 at 23:17

Dominik Balogh

305
1
3
12

score 1 · Answer 6 · answered Aug 10 '21 at 18:48

1

Adding css worked for me!

    .owl-dots .owl-dot span {
        width: 10px;
        height: 10px;
        margin: 5px 7px;
        background: #D6D6D6;
        display: block;
        -webkit-backface-visibility: visible;
        transition: opacity .2s ease;
        border-radius: 30px;
    }
    
    .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
        background: #869791;
    }

answered Aug 10 '21 at 18:48

Athanasiadis Michael

11
2

Yes! that code solved my problem! Also you need to add: .owl-dots{display: flex;align-items: center;justify-content: center;margin-top: 10px;} – Aleksandar Oct 18 '22 at 13:56

score 0 · Answer 7 · answered Jan 27 '20 at 17:28

According to Owl Carousel docs, you have to call the 2 CSS files below (inside head tag):

<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">

then near to footer tag, call JQuery and Owl Carousel JS scripts:

<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>

I was facing the same issue on my code, then i just empty all owl and jquery files, read the owl docs, following the installation process step by step. Now it works fine for me.

score 0 · Answer 8 · answered Sep 21 '21 at 12:21

$(function(){
    $(".owl-carousel").owlCarousel();        
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
    
<!-- Set up your HTML -->
<div class="owl-carousel owl-theme">
  <div> Content 1 </div>
  <div> Content 2</div>
  <div> Content 3</div>
  <div> Content 4</div>
  <div> Content 5</div>
  <div> Content 6</div>
  <div> Content 7</div>
</div>

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-ask). — Community, Sep 21 '21 at 12:28

score -1 · Answer 9 · answered Nov 24 '21 at 17:29

 $(document).ready(function() {
        $('.owl-carousel').owlCarousel({
            loop: true,
            autoplayTimeout: 2000,
            autoplayHoverPause: true,
            dots: false,
            margin: 5,
            nav: true,
            responsive: {
                0: {
                    items: 1
                },
                600: {
                    items: 3
                },
                1000: {
                    items: 4
                }
            }
        })
    });

Try : dots: false,

owlcarousel - dots do not appear

9 Answers9