Owl Carousel 2 - изображения в пагинации

Здесь заменим стандартные точки в пагинации Owl Carousel на изображения, а точнее - сделаем свю пагинацию. Предполагая, что сам слайдер уже подключен, со всеми скриптами и стилями, здесь эту часть описывать не буду.

Изображения для миниатюр можно получить:

1. Сделав дубль изображений в слайдере (мне не очень нравится такой вариант, т.к. здесь берем большое изображение и в css меняем размер)
2. Создаем их заранее, нужного размера, в нужном виде.

Рассмотрим оба варианта, тем более, что разница не большая. Для миниатюр добавим пустой блок, который будет заполняться изображениями из атрибута "src" изображений слайдера в первом варианте, или атрибута "data-icon" - во втором (этот атрибут не стандартный, но если добавить - ничего страшного)

В итоге получим примерно вот такой слайдер:

HTML

Для первого варианта разметка будет выглядеть так:

<div class="top-slide owl-carousel">
	<div class="item"><img src="1.jpg" alt="img1" data-icon="1-sm.jpg" /></div>
	<div class="item"><img src="2.jpg" alt="img2" data-icon="2-sm.jpg" /></div>
	<div class="item"><img src="3.jpg" alt="img3" data-icon="3-sm.jpg" /></div>
	<div class="item"><img src="4.jpg" alt="img4" data-icon="4-sm.jpg" /></div>
</div>
<div class="after-slide"></div>

Здесь в атрибуте "data-icon" указываем ссылку на миниатюру. Для второго варианта (если иконки для слайдов не нужны) этот атрибут не нужен, картинку для миниатюры возьмем из "src":

<div class="top-slide owl-carousel">
	<div class="item"><img src="1.jpg" alt="img1" /></div>
	<div class="item"><img src="2.jpg" alt="img2" /></div>
	<div class="item"><img src="3.jpg" alt="img3" /></div>
	<div class="item"><img src="4.jpg" alt="img4" /></div>
</div>
<div class="after-slide"></div>

Блок ".after-slide" заменит пагинацию слайдера. Для этого нужно указать его при вызове Owl Carousel в опции "dotsContainer". Он изначально расположен вне блока .owl-carousel, что бы не стать одним из слайдов при инициализации слайдера. Позже перенесем внутрь.

JS - заполнение миниатюр, инициализация

var ico = $(this).attr('src');

var ico = $(this).data('icon');

А вот и сам код:

$('.top-slide .item img').each(function() {
    var ico = $(this).data('icon');
    $('.after-slide').append('<span class="img" style="background: url('+ico+')"></span>');
});
$('.top-slide').owlCarousel({
	items: 1,
	autoplay: true,
	autoplayTimeout:6000,
	nav: false,
	dots: true,
	loop: true,
	animateOut: 'fadeOut',
	dotsContainer: '.after-slide',/*Указываем класс блока пагинации*/
	autoplayHoverPause: true
});
$('.after-slide').appendTo('.top-slide');
$('.after-slide img').click(function () {
 $('.top-slide').trigger('to.owl.carousel', [$(this).index(), 300]);
});

Здесь мы до вызова owlCarousel заполняем миниатюры, т.к. если запустить этот процесс позже, с включенной опцией "loop", будут скопированы в том числе и дубли изображений.

Следующий шаг - инициализация owlCarousel

И третий - переносим контейнер с миниатюрами внутрь "owl-carousel", это нужно для правильной работы паузы при наведении - "autoplayHoverPause"

CSS - немного оформления

Теперь осталось немного оформить то, что получилось. Я использовал здесь только стандартные стили, что идут в комплекте со скриптом, к ним добавил:

.after-slide {margin-top:3px;padding-top:3px;border-top:1px solid #ccc;white-space:nowrap;}
.after-slide .img {border: 1px solid #ccc;width:139px;height:69px;background-size: cover !important;display:inline-block;opacity: 0.5;}
.after-slide .img + .img {margin-left:1px;}
.after-slide .img.active {opacity: 1;}

Вот и все, возможно еще дополню.