Owl Carousel — это один из популярнейших Jquery слайдеров для сайта.
За что же он так полюбился разработчикам?
Давайте рассмотрим примеры настройки и создания различных по типу слайдеров.
Перейдя на официальный сайт Owl Carousel вы найдете ссылку на скачивание необходимых файлов для работы слайдера.
В загруженном архиве нам потребуются 2 файла: owl.carousel.min.js (находится в папке dist) и owl.carousel.min.css (dist/assets). Подключим их в нашем html документе, не забыв о Jquery:
1 2 3 |
<link href="css/owl.carousel.min.css" rel="stylesheet"> <script src="js/jquery-3.2.1.min.js"></script> <script src="js/owl.carousel.min.js"></script> |
Вот и все, необходимые файлы подключены! Далее рассмотрим настройку самого слайдера.
HTML
1 2 3 4 5 6 |
<div class="owl-carousel"> <div class="item"><img src="img/image-1.jpeg" alt=""></div> <div class="item"><img src="img/image-2.jpeg" alt=""></div> <div class="item"><img src="img/image-3.jpeg" alt=""></div> <div class="item"><img src="img/image-4.jpeg" alt=""></div> </div> |
JS
Создаем js файл и подключаем его послеjquery-3.2.1.min.js и owl.carousel.min.js.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
$(document).ready(function() { $('.owl-carousel').owlCarousel({ loop:true, //прокручивание элементов по кругу margin: 50, //отступы межу элементами nav:true, //отобразить элементы управления responsive:{ 0:{ items:1 }, //при ширине окна < 992 отображать 1 элемент 992:{ items:3 } //при ширине окна > 992 отображать 3 элемент } }); }); |
Для создания 2 слайдеров необходимо задать для каждого класс owl-carousel и свой собственный (slider-1 и slider-2). И в js файле отдельно их подключить.
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="owl-carousel slider-1"> <div class="item"><img src="img/image-1.jpeg" alt=""></div> <div class="item"><img src="img/image-2.jpeg" alt=""></div> <div class="item"><img src="img/image-3.jpeg" alt=""></div> <div class="item"><img src="img/image-4.jpeg" alt=""></div> </div> <div class="owl-carousel slider-2"> <div class="item"><img src="img/image-1.jpeg" alt=""></div> <div class="item"><img src="img/image-2.jpeg" alt=""></div> <div class="item"><img src="img/image-3.jpeg" alt=""></div> <div class="item"><img src="img/image-4.jpeg" alt=""></div> </div> |
JS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$(document).ready(function() { $('.slider-1').owlCarousel({ loop:true, margin: 50, nav:false, }); $('.slider-2').owlCarousel({ loop:true, margin: 50, nav:false, }); }); |
При использовании nav: true элементы управления отображаются на странице следующим образом:
1 2 3 4 |
<div class="owl-nav"> <div class="owl-prev">prev</div> <div class="owl-next">next</div> </div> |
Создадим свои собственные кнопки для перелистывания слайдера
HTML
1 2 3 4 5 6 7 8 |
<p class="prev">Назад</p> <p class="next">Далее</p> <div class="owl-carousel slider-1"> <div class="item"><img src="img/image-1.jpeg" alt=""></div> <div class="item"><img src="img/image-2.jpeg" alt=""></div> <div class="item"><img src="img/image-3.jpeg" alt=""></div> <div class="item"><img src="img/image-4.jpeg" alt=""></div> </div> |
JS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
$(document).ready(function() { var owl = $('.slider-1').owlCarousel({ loop:true, margin: 50, nav:false, responsive:{ 0:{ items:3 } } }); owl.owlCarousel(); $('.next').click(function() { owl.trigger('next.owl.carousel'); }); $('.prev').click(function() { owl.trigger('prev.owl.carousel', [300]); }); }); |