Descripton
{dotData:true} option allow you to put some custom text/img/html into pagination dots.
In example above i used little thumbnail images from placehold.it website.
Simple, just put your content for dot into data-dot=" "
// html
<div class="owl-carousel">
<div data-dot="dot_content_here"> item_content </div>
<div data-dot="dot_content_here"> item_content </div>
<div data-dot="dot_content_here"> item_content </div>
<div data-dot="dot_content_here"> item_content </div>
<div data-dot="dot_content_here"> item_content </div>
...
</div>
//Javascript
var owl = $('.owl-carousel'); // save reference to variable
$('.owl-carousel').owlCarousel({
items:1,
stagePadding:50,
loop:true,
margin:10,
smartSpeed:450,
dotData:true,
});