How come dots/navigation buttons are not visiable

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/

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

Answer 1

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" />

Answer 2

pagination:false,
navigation:true

try this

Answer 3

dots: false is not working in owl carousel as described in documentation. To hide dots you can use:

---

pagination: false

---

it hides only dots and pagination keep working.

Answer 4

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/

Answer 5

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!