bobbyrne01 bobbyrne01 - 27 days ago 7
jQuery Question

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

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

Answer

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/

Comments