Здесь заменим стандартные точки в пагинации Owl Carousel на изображения, а точнее - сделаем свю пагинацию. Предполагая, что сам слайдер уже подключен, со всеми скриптами и стилями, здесь эту часть описывать не буду.
Изображения для миниатюр можно получить:
- Сделав дубль изображений в слайдере (мне не очень нравится такой вариант, т.к. здесь берем большое изображение и в css меняем размер)
- Создаем их заранее, нужного размера, в нужном виде.
Рассмотрим оба варианта, тем более, что разница не большая. Для миниатюр добавим пустой блок, который будет заполняться изображениями из атрибута "src" изображений слайдера в первом варианте, или атрибута "data-icon" - во втором (этот атрибут не стандартный, но если добавить - ничего страшного)
В итоге получим примерно вот такой слайдер:
HTML
Для первого варианта разметка будет выглядеть так:
Здесь в атрибуте "data-icon" указываем ссылку на миниатюру. Для второго варианта (если иконки для слайдов не нужны) этот атрибут не нужен, картинку для миниатюры возьмем из "src":
Блок ".after-slide" заменит пагинацию слайдера. Для этого нужно указать его при вызове Owl Carousel в опции "dotsContainer". Он изначально расположен вне блока .owl-carousel, что бы не стать одним из слайдов при инициализации слайдера. Позже перенесем внутрь.
JS - заполнение миниатюр, инициализация
Код для обоих вариантов будет отличаться только одним - разными атрибутами при получениием ссылки для изображения. Для первого варианта:
Для второго:
Это вторая строка в приведенном коде.
А вот и сам код:
Здесь мы до вызова owlCarousel заполняем миниатюры, т.к. если запустить этот процесс позже, с включенной опцией "loop", будут скопированы в том числе и дубли изображений.
Следующий шаг - инициализация owlCarousel
И третий - переносим контейнер с миниатюрами внутрь "owl-carousel", это нужно для правильной работы паузы при наведении - "autoplayHoverPause"
CSS - немного оформления
Теперь осталось немного оформить то, что получилось. Я использовал здесь только стандартные стили, что идут в комплекте со скриптом, к ним добавил:
Вот и все, возможно еще дополню.
Спасибо, решение хорошее!
От себя немного добавлю — если у кого то была проблема что при нажатии на миниатюры не происходит смены изображения вот рабочий код:
Спасибо! Переписал код, заодно убрал обращение к классам, что бы можно было несколько на страницу вывести
Спасибо большое. Простое и работающее решение. Только там перед img точка пропущена:
$('.after-slide img').click(function () {
Здравствуйте, спасибо за вашу работу. Всё работает, но при внедрении в свой проект, я столкнулся с небольшими трудностями, которые хотел бы осветить, вдруг кто-нибудь тоже столкнется.
Речь пойдет о куске кода с циклом: дело в том, что у меня помимо ваших спанов с изображениями, создались еще дефолтные кнопки дотов со вложенными спанами, не могу точно утверждать, почему это произошло, но нашёл такое решение:
Если использовать .not('.cloned) — то можно инициализировать функцию и после объявления карусели, т.к. дивы с классом(cloned) будут исключаться из цикла.