How come dots/navigation buttons are not visiable using owlcarousel?

Question

How come the navigation buttons are not visible?

I'm using jQuery and owlcarousel (http://owlgraphic.com/owlcarousel/).

http://jsfiddle.net/bobbyrne01/s10bgckL/1/

screenshot

html ..

<div id="owl-demo">
    <div class="item">
        <img src="http://placehold.it/50x50" alt="Owl Image" />
    </div>
    <div class="item">
        <img src="http://placehold.it/50x50" alt="Owl Image" />
    </div>
    <div class="item">
        <img src="http://placehold.it/50x50" alt="Owl Image" />
    </div>
    <div class="item">
        <img src="http://placehold.it/50x50" alt="Owl Image" />
    </div>
    <div class="item">
        <img src="http://placehold.it/50x50" alt="Owl Image" />
    </div>
    <div class="item">
        <img src="http://placehold.it/50x50" alt="Owl Image" />
    </div>
    <div class="item">
        <img src="http://placehold.it/50x50" alt="Owl Image" />
    </div>
    <div class="item">
        <img src="http://placehold.it/50x50" alt="Owl Image" />
    </div>
</div>

js ..

$(document).ready(function () {
    $("#owl-demo").owlCarousel({

        autoPlay: 3000, //Set AutoPlay to 3 seconds
        dots: true,
        items: 2,
        itemsDesktop: [1199, 3],
        itemsDesktopSmall: [979, 3]
    });
});

css ..

#owl-demo .item {
    margin: 3px;
}
#owl-demo .item img {
    display: block;
    width: 50%;
    height: auto;
}

http://stackoverflow.com/questions/37340868/owl-carousel-2-pagination-dots-were-not-diplayed — devanathan, May 23 '16 at 14:03

score 21 · Accepted Answer · answered Dec 10 '14 at 16:34

21

The minified css file you have doesn't appear to have a style for that element: .owl-theme .owl-controls .owl-page span.

Here are the styles that are applied by the demo on the owlgraphic.com site: http://jsfiddle.net/s10bgckL/2/

answered Dec 10 '14 at 16:34

mellis481

4,332
12
71
118

If I change your code to say - dots: false, the dots still appear! – Neil Jan 14 '15 at 12:19
@Neil: I just used the ops jsfiddle. I only updated it to include the correct stylesheet. It indeed appears that the `dots` option does nothing. – mellis481 Jan 14 '15 at 14:00
1

I just checked the docs, it seems the property is pagination: false to turn off the dots. – Neil Jan 14 '15 at 16:02
i am facing the issue, can you please help me know to resolve the issue? – devanathan May 23 '16 at 13:51
http://stackoverflow.com/questions/37340868/owl-carousel-2-pagination-dots-were-not-diplayed – devanathan May 23 '16 at 14:03

Chamandeep · Answer 2 · 2016-11-08T11:06:12.120

9

pagination:false,
navigation:true

try this

edited Nov 08 '16 at 11:06

answered Nov 08 '16 at 10:43

Chamandeep

116
2
8

score 4 · Answer 3 · answered Oct 08 '19 at 05:01

4

Add CSS for Owl Carousel theme,

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css" />

and change,

<div id="owl-demo">

to

<div id="owl-demo" class="owl-theme">

Demo: jsfiddle link

answered Oct 08 '19 at 05:01

Andy Moore

41
3

score 0 · Answer 4 · answered Sep 15 '17 at 17:11

I believe the problem you are running into is you didn't include the Owl Carousel theme. Not sure if you are using the CDN, but look here: https://cdnjs.com/libraries/owl-carousel and make sure you include the CSS for the theme in addition to the standard CSS.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css" />

score 0 · Answer 5 · answered Oct 24 '20 at 09:25

Please set this particular option dots:true

$('.banner .owl-carousel').owlCarousel({
    items:1,
    loop:true,
    dots:true,
    autoplay:true,
    autoplayTimeout:7000,
    autoplayHoverPause:false,
    navText : ["<i class='fa fa-long-arrow-left'></i>","<i class='fa fa-long-arrow-right'></i>"]
});

score -2 · Answer 6 · edited Aug 19 '17 at 08:53

-2

Go to owl.carousel.min.js or owl.carousel.js file whatever you linked.

Find and Replace disabled with anyClass. You'll Find 6 times, enjoy!

edited Aug 19 '17 at 08:53

aristotll

8,694
6
33
53

answered Aug 19 '17 at 05:34

Azizul

1
1

How come dots/navigation buttons are not visiable using owlcarousel?

6 Answers6

Linked