Owlcarousel2: Pagination not showing up.

[davidangel]

    jQuery(document).ready(function() {
        jQuery("#video-tab .video-list").owlCarousel({
            margin:20,
            stagePadding:30,
            pagination: true,
            responsive:{
                0:{
                    items:1
                },
                480:{
                    items:2
                },
                760:{
                    items:3
                }
            }
        });
    });

I'm not seeing the dot pagination at all. Not even in the markup.

[smajeed]

I was having the same problem and figured out that using the version in the zip file (owl-develop/src/js/owl.carousel.js) doesn't work but using the version on use on the demo site (http://www.owlcarousel.owlgraphic.com/demos/center.html) does work for me:

http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/owl.carousel.js

[alabastida]

+1
smajeed: the files in the folder owl-develop/src are separated components to build the main owl.carousel.js file, is not the same as using the compiled js from the owlcarousel site, to have a full version you need to build your source with grunt (read Readme - Building), then you'll get a dist folder created by the compile process with the full version of owl.carousel.js

Still, I do have this same problem (pagination / dots not showing or even created) with my compiled version of owl.carousel.js with sources from today :( Any suggestions?

[tonicastillo]

Are you sure you have included owl.navigation.js?

[TanimMahbub]

1. download owl-carousel from here
2. include owl-css and owl-js in your project

NOW you have to do some _custom css_ for owl-Pagination, because owl.carousel.js and owl.carousel.css _don't have_ any design for owl-Pagination (owl-dot), so ... let's see what class does owl-carousel have for owl-Pagination.

there are 2 classes for owl-Pagination-

1. .owl-dots for owl-Pagination container
2. .owl-dot which is a single dot for owl-Pagination
3. and the universal .active class

For example-

.owl-dots {
      margin: 0 auto /*for centering the dots*/
}

.owl-dot {
     width: 10px;
     height: 10px;
     border-radius: 100%;
     border: 1px solid #ccc;
     background: #333;
     margin-right: 5px;
     display: inline-block;  /*for making them horizontal, if you want vertical then you can use- display: block*/
}

.owl-dot.active {
     background: #ffa60a;
}

It worked for me, I hope it will for everyone

[carlpeterson]

Thank you, TanimMahbub. I was pulling my hair out on this one.

[Nasir-Husain]

Thank you.