Слайдер для сайта Owl Carousel 2 — настройка просто и быстро

JavaScript
90
Слайдер для сайта Owl Carousel 2 — настройка просто и быстро
Active vision

Сегодня я расскажу о том, как создать анимированный, отзывчивый, полноэкранный слайдер для сайта с помощью owl.js 2 (или Owl Carousel 2). Чтобы понять, что именно мы будем создавать, посмотрите нашу демонстрацию ниже.

Owl Carousel 2 настройка

Что такое Owl Carousel?

Owl.js — это популярный jQuery плагин, который позволяет создавать привлекательные, отзывчивые карусели. Немаловажно, что он абсолютно бесплатный и подходит для коммерческого использования. К тому же, плагин имеет отличную поддержку браузеров, он протестирован на следующих браузерах и устройствах:

  1. Chrome
  2. Firefox
  3. Opera
  4. IE7/8/10/11
  5. iPad Safari
  6. iPod4 Safari
  7. Nexus 7 Chrome
  8. Galaxy S4
  9. Nokia 8s Windows 8

Установка

Чтобы начать работу с owl, начните с загрузки и установки следующих CSS файлов в свой проект: owl.carousel.min.css и owl.theme.default.min.css. Файл owl.carousel.css обязателен и должен быть подключен перед любыми другими *.js файлами.


HTML
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">

Если у вас не подключен jQuery, то добавьте его с помощью CDN (пример ниже). Также скачайте и подключите owl.carousel.min.js


HTML
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="js/owl.carousel.min.js"></script>

Разметка HTML

Нам не нужна никакая особая разметка. Все что требуется, чтобы создать слайдер для сайта — это обернуть наши слайды элементом div с классом owl-carousel. Этот класс является обязательным. Также, если вы хотите использовать навигационные элементы по умолчанию, нужно добавить класс owl-theme к этому же div-у.

Создадим 2 слайда, каждый из которых будет содержать заголовок, кнопку и фоновое изображение.


HTML
<div class="owl-carousel owl-theme" id="slider">
    <!--Слайд 1-->
    <div class="slide" style="background-image: url('slide-1.jpg')">
        <h2 class="slide__title">Заголовок слайда</h2>
        <a href="#" class="slide__link">Кнопка</a>
    </div>
    <!--Остальные слайды-->
    ...
</div>

Вы можете создать любую разметку слайдов и добавить к ней какие угодно стили.

Вызов плагина

Далее мы вызовем функцию инициализатор в js и наша карусель готова.


JS
$(document).ready(function(){
  $("#slider").owlCarousel();
});

Owl Carousel 2 имеет дополнительные опции, которые помогут вам кастомизировать ваш слайдер. Давайте разберем самые популярные из них:

Опция
По умолчанию
Значение
items
3
Количество элементов, которые будут отображаться на экране.
margin
0
Отступ справа от элемента в пикселях (margin-right).
loop
false
Бесконечный цикл слайдов.
mouseDrag
true
Разрешает/запрещает перетаскивание слайдов мышью.
touchDrag
true
Разрешает/запрещает перелистывание слайдов пальцем.
nav
false
Отображает кнопки "Следующий/Предыдущий" слайд.
navText
[&#x27;next&#x27;, &#x27;prev&#x27;]
Возможность изменить вид кнопок "Следующий/Предыдущий" слайд.
dots
true
Отображает навигацию в виде точек.
autoplay
false
Автовоспроизведение.
autoplayTimeout
5000
Интервал автовоспроизведения.
smartSpeed
250
Скорость смены слайдов.
center
false
Позиционирует первый слайд в центре карусели.
responsive
Пустой объект
Устанавливает параметры слайдера для адаптивной верстки.

Owl Carousel 2: настройка. Эти опции используются при инициализации карусели. Вот несколько примеров того, как можно кастомизировать слайдер.


JS
$(document).ready(function(){
    const slider = $("#slider").owlCarousel({
        loop:true,
        margin:10,
        nav:true,
        responsive:{
            0:{
                items:1
            },
            600:{
                items:3
            },
            1000:{
                items:5
            }
        }
    });
});

Мы можем установить первый слайд по центру карусели с помощью опции center:


JS
$(document).ready(function(){
    const slider = $("#slider").owlCarousel({
        center: true,
        items:2,
        loop:false,
        margin:10,
        responsive:{
            600:{
                items:4
            }
        }
    });
});

Также возможно поменять внешний вид стрелок "Следующий/Предыдущий" слайд, чтобы сделать их такими, как на слайдере в начале статьи. Включим опцию навигации с помощью опции nav и создадим свои SVG стрелки.


JS
$(document).ready(function(){
    const slider = $("#slider").owlCarousel({
        items: 1,
        loop: true,
        nav: true,
        navText: [
          '<svg width="35" height="35" viewBox="0 0 24 24"><path d="M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z"/></svg>',
          '<svg width="35" height="35" viewBox="0 0 24 24"><path d="M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z"/></svg>'
        ]
     });
});

Надеюсь, что вам была полезна статья Слайдер для сайта Owl Carousel 2 — настройка просто и быстро. Если вы хотите добавить больше визуальных эффектов на сайт, посмотрите нашу статью про анимацию при прокрутке страницы с библиотекой AOS js.

Написать комментарий