Верстка

Несколько слайдов на одной странице с помощью Owl Carousel 2

13.08.2024

Введение

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

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

Подключение Owl Carousel 2

Если вы ни разу не работали с плавном напомню как его подключить к вашему проекту. Это можно сделать двумя способами: с помощью CDN или локально, скачав файлы плагина.

1. Подключение через CDN

Для подключения через CDN вам нужно добавить следующие строки в секцию <head> вашего HTML-документа:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

2. Локальное подключение

Если вы предпочитаете локально хранить файлы, то скачайте их с официального сайта Owl Carousel 2 и подключите следующим образом:

<link rel="stylesheet" href="path/to/owl.carousel.min.css">
<link rel="stylesheet" href="path/to/owl.theme.default.min.css">
<script src="path/to/jquery.min.js"></script>
<script src="path/to/owl.carousel.min.js"></script>

Создание нескольких слайдеров на одной странице

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

1. Код HTML для нашей задумки

Создайте HTML-разметку для каждого слайдера. Например:

<div class="owl-carousel owl-theme slider-one">
    <div class="item"><img src="image1.jpg" alt="Картинка 1"></div>
    <div class="item"><img src="image2.jpg" alt="Картинка 2"></div>
    <div class="item"><img src="image3.jpg" alt="Картинка 3"></div>
</div>

<div class="owl-carousel owl-theme slider-two">
    <div class="item"><p>"Отзыв 1"</p></div>
    <div class="item"><p>"Отзыв 2"</p></div>
    <div class="item"><p>"Отзыв 3"</p></div>
</div>

В данном примере у нас есть два слайдера с классами slider-one и slider-two. Каждый слайдер содержит элементы с классом item, которые представляют собой слайды.

2. Инициализация слайдеров

Теперь необходимо инициализировать каждый слайдер с помощью JavaScript. Добавьте следующий код в конец вашего HTML-документа перед закрывающим тегом </body>:

<script>
$(document).ready(function(){
  $(".slider-one").owlCarousel({
    items: 1,
    loop: true,
    margin: 10,
    nav: true,
    autoplay: true,
    autoplayTimeout: 3000,
    autoplayHoverPause: true
  });

  $(".slider-two").owlCarousel({
    items: 1,
    loop: true,
    margin: 10,
    nav: true,
    autoplay: false,
  });
});
</script>

Здесь мы инициализируем оба слайдера с разными параметрами. Первый слайдер (slider-one) будет автоматически переключать слайды каждые 3 секунды, а второй (slider-two) не будет автоматически переключаться.

3. Дополнительные настройки

Owl Carousel 2 предлагает множество настроек для кастомизации слайдеров. Вы можете изменить количество отображаемых слайдов (items), включить или отключить навигационные стрелки (nav), добавить точки для навигации (dots), настроить поведение слайдов при наведении курсора (autoplayHoverPause) и многое другое.

Например, чтобы сделать второй слайдер более сложным, вы можете добавить показ сразу нескольких слайдов на одном экране:

<script>
$(document).ready(function(){
  $(".slider-two").owlCarousel({
    items: 3,
    loop: true,
    margin: 10,
    nav: true,
    autoplay: false,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:2
        },
        1000:{
            items:3
        }
    }
  });
});
</script>

В этом примере на экранах шириной менее 600 пикселей будет показан один слайд, на экранах от 600 до 1000 пикселей — два, а на более широких экранах — три слайда одновременно.

Заключение

Во и все, использование нескольких слайдеров на одной странице с помощью Owl Carousel 2 это очень просто.

jquery JS