Здесь заменим стандартные точки в пагинации Owl Carousel на изображения, а точнее - сделаем свю пагинацию. Предполагая, что сам слайдер уже подключен, со всеми скриптами и стилями, здесь эту часть описывать не буду.
Изображения для миниатюр можно получить:
- Сделав дубль изображений в слайдере (мне не очень нравится такой вариант, т.к. здесь берем большое изображение и в css меняем размер)
- Создаем их заранее, нужного размера, в нужном виде.
Рассмотрим оба варианта, тем более, что разница не большая. Для миниатюр добавим пустой блок, который будет заполняться изображениями из атрибута "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');
Это вторая строка в приведенном коде.
А вот и сам код:
var carousel = $('.top-slide');
var dots = $(carousel).next();
$(carousel).find('.item img').each(function() {
var ico = $(this).data('icon');
dots.append('<span class="img" style="background: url('+ico+')"></span>');
});
carousel.owlCarousel({
items: 1,
autoplay: true,
autoplayTimeout:6000,
nav: false,
dots: true,
loop: true,
animateOut: 'fadeOut',
dotsContainer: dots,/*Указываем класс блока пагинации*/
autoplayHoverPause: true,
onInitialized: carouselInitialized
});
dots.appendTo(carousel);
function carouselInitialized () {
dots.find('.img').click(function () {
carousel.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;}
Вот и все, возможно еще дополню.
Спасибо, решение хорошее!
От себя немного добавлю — если у кого то была проблема что при нажатии на миниатюры не происходит смены изображения вот рабочий код:
Спасибо! Переписал код, заодно убрал обращение к классам, что бы можно было несколько на страницу вывести
Спасибо большое. Простое и работающее решение. Только там перед img точка пропущена:
$('.after-slide img').click(function () {
Здравствуйте, спасибо за вашу работу. Всё работает, но при внедрении в свой проект, я столкнулся с небольшими трудностями, которые хотел бы осветить, вдруг кто-нибудь тоже столкнется.
Речь пойдет о куске кода с циклом: дело в том, что у меня помимо ваших спанов с изображениями, создались еще дефолтные кнопки дотов со вложенными спанами, не могу точно утверждать, почему это произошло, но нашёл такое решение:
Если использовать .not('.cloned) — то можно инициализировать функцию и после объявления карусели, т.к. дивы с классом(cloned) будут исключаться из цикла.