Несколько слайдеров на одной странице сайта owl carousel 2

Несколько слайдеров на одной странице сайта owl carousel 2

Всем привет. Хочу продолжить тему использования адаптивного слайдера на сайте, на примере OWL Carousel 2. В данной статье пойдет речь о создании нескольких слайдеров на одной странице не зависимых друг от друга.

Исходя из текущих тенденций web дизайна, мы давно уже привыкли к слайдерам в шапке сайте. До какого-то времени только ленивый не ставил на свой сайт слайдер. Появились новые дизайнерское решение как использовать слайдер на сайте помимо банального баннера в шапке сайта. Данную идею подхватили интернет-магазины сделав из обычного слайдера карусель с товарами или брендами фирм товар который продают. Такая карусель если ее красиво оформить, очень ярко выглядит на сайт, вы можете поместить больше блоков с товарами, нежели вам позволяет разметка HTML.

Сейчас давайте попробуем создать два не зависимых слайдера на одной странице сайта. Для примера я буду использовать хорошо всем известную QWL Carousel 2. Как ее установить и где ее можно скачать читайте ( Адаптивный слайдер на сайт на примере Owl Carousel 2 ). Я же останавливаться на этом не буду и пойдем дальше. Для создания двух и более слайдеров нам нужно определить какие селекторы мы будем использовать для инициализации нашей карусели. Это может быть как обычный Class так и ID как вам удобно.

В документации по OWL Carousel 2 в примере используется Class="owl-carousel", данный класс используется в качестве контейнера к карусели. Чтобы не писать свои стили к каждому слайдеру я предлагаю вам использовать свой Class для инициализации слайдера назовем их slider-one и slider-two.

Создаем контейнеры для нескольких слайдеров на одной странице сайта на примере OWL Carousel 2


<!-- Разметка первой карусели -->
<div class="owl-carousel slide-one">
    <div class="item"><img src="img/content/owl/1.jpg" alt="" /></div>
    <div class="item"><img src="img/content/owl/2.jpg" alt="" /></div>
    <div class="item"><img src="img/content/owl/3.jpg" alt="" /></div>
    <div class="item"><img src="img/content/owl/4.jpg" alt="" /></div>
</div>

<!-- Разметка второй карусели -->
<div class="owl-carousel slide-two">
    <div class="item"><div class="desc">Lorem 1</div></div>
    <div class="item"><div class="desc">Lorem 2</div></div>
    <div class="item"><div class="desc">Lorem 3</div></div>
    <div class="item"><div class="desc">Lorem 4</div></div>
</div>

Устанавливаем настройки для OWL Carousel 2


$(document).ready(function(){
  $(".slide-one").owlCarousel({
        loop:true, //Зацикливаем слайдер
        margin:10, //Отступ от картино если выводите больше 1
        nav:false, //Отключил навигацию
        autoplay:true, //Автозапуск слайдера
        smartSpeed:1000, //Время движения слайда
        autoplayTimeout:2000, //Время смены слайда
        responsive:{ //Адаптация в зависимости от разрешения экрана
            0:{
                items:1
            },
            600:{
                items:2
            },
            1000:{
                items:3
            }
        }
    });

    $(".slide-two").owlCarousel({
        loop:true, //Зацикливаем слайдер
        margin:10, //Отступ от картино если выводите больше 1
        nav:false, //Отключил навигацию
        autoplay:true, //Автозапуск слайдера
        smartSpeed:2000, //Время движения слайда
        autoplayTimeout:4000, //Время смены слайда
        responsive:{ //Адаптация в зависимости от разрешения экрана
            0:{
                items:1
            },
            600:{
                items:2
            },
            1000:{
                items:5
            }
        }
    });
});

Пример: .slide-one

Пример: .slide-two

Поддержи проект:

  • ...
    Роман 13:00:26 31/10/2017
    Я так сначала и сделал, но на деле не так все очевидно) Если одинаковые классы, то получается тоже самое - два отдельных слайдера. Голову сломал о такую дурацкую задачу P.S. установил плагин для прокрутки колесом мыши ( https://owlcarousel2.github.io/OwlCarousel2/demos/mousewheel.html ), вот с ним движутся все слайды синхронно, а вот по курсору они два отдельных организма. Был бы очень благодарен за ответ!
  • Администрация
    Администрация 13:54:27 31/10/2017

    Вам нужно отлавливать события слайдера. Все по аналогии с вашим плагином прокруткой колесом. Плагин прокрутки колесом отлавливает событие (действие). Вам нужно последний код приспособить под себя. Проинспектируйте кнопки переключения вашего слайдера и укажите нужный селектор для обработки.

    События, предусмотренные Owl Carousel в стратегических местах кода. Это дает вам возможность прослушивать любые изменения в действии карусели и использовать события для реализации своих действий.

    var owl = $('.owl-carousel');
    owl.owlCarousel();
    // Слушаем измитения в OWL
    owl.on('changed.owl.carousel', function(event) {
        ...
    })		
    

    Вы также можете использовать триггер для управления OWL Carousel для управления слайдами

    var owl = $('.owl-carousel');
    owl.owlCarousel();
    // Переключаем слайд вперед
    $('.customNextBtn').click(function() {
        owl.trigger('next.owl.carousel');
    })
    // Переключаем слад назад
    $('.customPrevBtn').click(function() {
        // Устанавливаем параметр скорости
        // Параметр должен быть заключен в кавдрадные скобки '[]'
        owl.trigger('prev.owl.carousel', [300]);
    })
    
  • ...
    Роман 20:54:55 27/10/2017
    Здравствуйте, вроде такая простая задача, но не знаю как решить. Как можно связать два слайдера? Чтобы они одновременно двигались, когда ты передвигаешь один из них
  • Администрация
    Администрация 11:58:09 28/10/2017

    Роман, честно не проверял, но попробуйте использовать одинаковый класс для обоих слайдеров при инициализации и тогда у Вас получится два абсолютно синхронных слайдера.

  • ...
    Кафка 01:42:40 04/10/2017
    Спасиииибоооооо
  • Администрация
    Администрация 22:43:45 05/10/2017

    Пожалуйста....

  • ...
    Алёна 10:59:01 15/08/2017
    Спасибо! Полезная статья. Очень помогла.
  • Администрация
    Администрация 17:52:24 29/08/2017

    Пожалуйста )

  • ...
    Вит 09:10:21 05/04/2017
    Здравствуйте, а как синхронизировать слайдеры? чтобы 1 был как слайдер, а второй как навигация по миниатюрам в слике например это asNavFor: , а как тут?
  • Администрация
    Администрация 16:59:58 17/04/2017

    Нужно будет дописывать код на Javascript или JQuery из коробки такого функционала нет.

Форма обратной связи
captcha