owlcarousel - dots do not appear

Asked 24/4, 2016 at 13:36 Answered 24/11, 2021 at 17:29

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

Turquoise answered 24/4, 2016 at 13:36 Comment(2)

Hi, is this live somewhere? A link would really help us to investigate. Thanks – Gamal 24/4, 2016 at 13:40

Possible duplicate of How come dots/navigation buttons are not visiable using owlcarousel? – Gamal 24/4, 2016 at 13:43

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.

Gamal answered 24/4, 2016 at 13:50 Comment(1)

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. ` – Adim 21/8, 2017 at 12:2

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.

Guarnerius answered 15/2, 2017 at 11:46 Comment(0)

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

Tartaric answered 15/5, 2017 at 21:11 Comment(0)

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.

Gamal answered 24/4, 2016 at 13:50 Comment(1)

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. ` – Adim 21/8, 2017 at 12:2

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>

Moffitt answered 16/3, 2019 at 12:52 Comment(0)

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.

Saulsauls answered 16/3, 2021 at 23:17 Comment(0)

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

Quart answered 10/8, 2021 at 18:48 Comment(1)

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

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.

Readus answered 27/1, 2020 at 17:28 Comment(0)

$(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>

Thinker answered 21/9, 2021 at 12:21 Comment(1)

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. – Schlock 21/9, 2021 at 12:28

-1

 $(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,

Hallucinogen answered 24/11, 2021 at 17:29 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags