Сегодня я расскажу о том, как создать анимированный, отзывчивый, полноэкранный слайдер для сайта с помощью owl.js 2 (или Owl Carousel 2). Чтобы понять, что именно мы будем создавать, посмотрите нашу демонстрацию ниже.
Что такое Owl Carousel?
Owl.js — это популярный jQuery плагин, который позволяет создавать привлекательные, отзывчивые карусели. Немаловажно, что он абсолютно бесплатный и подходит для коммерческого использования. К тому же, плагин имеет отличную поддержку браузеров, он протестирован на следующих браузерах и устройствах:
- Chrome
- Firefox
- Opera
- IE7/8/10/11
- iPad Safari
- iPod4 Safari
- Nexus 7 Chrome
- Galaxy S4
- 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 имеет дополнительные опции, которые помогут вам кастомизировать ваш слайдер. Давайте разберем самые популярные из них:
Owl Carousel 2: настройка. Эти опции используются при инициализации карусели. Вот несколько примеров того, как можно кастомизировать слайдер.
1
2
3
4
5
6
7
8
9
10
11
12
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:
1
2
3
4
5
6
7
8
9
10
11
12
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.
