Слайдер OWL Carousel 2.0 для ваших проектов
Как часто приходится использоваться листалки картинок? Да почти в каждом проекте 🙀 Даже самый скучный лендос из одной секции тоже хочет быть со слайдером.
Можно и свой сделать, но зачем? Существует туева хуча популярных велосипедов, таких как: Slick.js, bxSlider, OWL Carousel и т.д. Я долго и нудно пользовался сликом, пока не наткнулся на OWL Carousel 2.
На мой испорченный вкус - очень удобная и сильно кастомизабельная штука.
Базар базаром, но давайте подробней.
Первое что хочется посмотреть, это демки - они тут. Кому впадлу переходить, напишу что слайдер имеет 60+ опций и подойдет практически под любую задачу.
Пару строк как его использовать
1. Скачиваем слайдер с официального гита: https://github.com/OwlCarousel2/OwlCarousel2/archive/2.3.4.zip
2. Подрубаем стили:
<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css"> <link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">
Кстати, в последнем файле правится внешний вид слайдера.
3. Подрубаем скриптули:
<script src="owlcarousel/owl.carousel.min.js"></script>
Убедитесь что вы подключили jQuery!
4. Собственно ставим в HTML в нужное место наш слайдер:
<!— Слайдер для фоток жопы --> <div class="owl-carousel"> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> </div>
5. Наконец, дописываем скриптулю в ваш файл скриптов, ну или под слайдером в тег <script></script>:
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});
У слайдера есть много опций, они тут - https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html
Прописываются они примерно так:
$(".owl-carousel").owlCarousel({
nav: true, //Навигация стрелочками
loop: true, //Бесконечный слайдер
dots: false, //Навигация точками
autoplay:true //Автоматическая смена слайдов
});