dotData - thumbnails.

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