Самый популярный плагин для карусели на jQuery – Owl Carousel 2.
Все функции – https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html
Подключение Owl Carousel 2 на своем сайте
CSS – подключаем файлы стилей для карусели Owl Carousel 2
Подключаем в хедере, в примере абсолютные пути на CDN, но лучше подключать стили и скрипты со своего сайта.
<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">
JS – подключаем необходимые скрипты для Owl Carousel 2
Подключаем в футере jQuery, библиотеку OwlCarousel2 и свйо файл скриптов, в котором инициализируем и настраиваем слайдер.
Здесь указаны абсолютные ссылки на CDN, но лучше подключать все стили и скрипты со своего сайта, предварительно скачав все файлы по этой ссылке.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script> <script src="js/script.js"></script>
HTML – HTML-код самой карусели Owl Carousel 2
Самая простая и базовая разметка для понимания, в каждом слайде может быть любое количество блоков и элементов.
<div class="owl-carousel"> <div> Slide 1 </div> <div> Slide 2 </div> <div> Slide 3 </div> <div> Slide 4 </div> <div> Slide 5 </div> <div> Slide 6 </div> <div> Slide 7 </div> </div>
Пример слайдера Owl Carousel 2 с тремя слайдами:
Содержимое файла script.js
$(function() { // Owl Carousel var owl = $(".owl-carousel"); owl.owlCarousel({ items: 3, margin: 10, loop: true, nav: true }); });
Пример слайдера Owl Carousel 2 с тремя слайдами:
See the Pen Owl Carousel Base by Denis (@deniscreative) on CodePen.0
Чтобы задать кастомные стрелки, например, это нужно для какого-то конкретного слайдера по дизайну, добавляем:
navText: [ '<span class="arrow-owl arrow-left"></span>', '<span class="arrow-owl arrow-right"></span>' ],
Чтобы использовать базовые стили для навигации из файла owl.theme.default.min.css
, необходимо добавить класс owl-theme
к контейнеру карусели:
<div class="owl-carousel owl-theme">
Можно вынести стрелки навигации за контейнер карусели, данный код добавляем после инициализации карусели:
$(".next_button").click(function(){ owl.trigger("next.owl.carousel"); }); $(".prev_button").click(function(){ owl.trigger("prev.owl.carousel"); });
Делаем карусель адаптивной:
responsive:{ 0:{ items:1 }, 768:{ items:2 }, 1180:{ items:3 } }
Простая расшифровка – ширина экрана от 0 до 768px – выводится 1 слайд, от 768px до 1180px – выводится 2 слайда, ширина экрана больше 1180px – отображается по 3 слайда в карусели.
Как добавить видео в карусель Owl Carousel:
1. Добавляем в options:
video:true
2. Используем такую разметку для HTML:
<div class="owl-carousel owl-theme"> <div><a class="owl-video" href="https://vimeo.com/23924346"></a></div> <div><a class="owl-video" href="https://www.youtube.com/watch?v=JpxsRwnRwCQ"></a></div> <div><a class="owl-video" href="https://www.youtube.com/watch?v=FBu_jxT1PkA"></a></div> </div>
3. В данном примере еще используется такое правило в CSS:
.owl-carousel .item-video{ height:300px; }
Пример вывода видео в слайдере Owl Carousel:
See the Pen Owl Carousel with VIDEO by Denis (@deniscreative) on CodePen.0
Как сделать анимированную смену слайдов
Сначала подключаем дополнительно файл стилей animate.css, можно отсюда:
https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css
А затем в опции карусели добавляем, например, эффект затухания:
animateOut: 'fadeOut'
На примере ниже установлены такие опции для анимации слайдов:
animateOut: 'slideOutDown', animateIn: 'slideInDown',
Пример реализации анимированной карусели Owl Carousel:
See the Pen Owl Carousel with animation by Denis (@deniscreative) on CodePen.0
Пример разрушения слайдера для обычного экрана и использование слайдера только для мобильных телефонов
trigger('destroy.owl.carousel')
Суть задачи в том ,что на десктопной версии нам не нужен слайдер, а нужно, чтобы блоки были друг за другом в несколько рядов, а вот на мобильной версии сайта, чтобы не размещать кучу блоков друг под другом, мы сделаем просто слайдер, в котором разместятся все блоки, но по высоте эта вся секция займет всего один блок.
Нужно немного правок внести в стили CSS, а так же поменять код инициализации карусели, весь скрипт расписывать не буду, основная суть его в том, что при ширине экрана больше 600px – карусель разрушается и остаются просто блоки внутри контейнера, а при ширине экрана меньше 600px происходит инициализация карусели, и мы вместо длинной простыни блоков на мобильном видим аккуратный слайдер с этими самыми блоками.
В моем примере я использую граничное значение 600px, чтобы результат точно отобразился внутри контента моего сайта, но для мобильных вы можете использовать breakpoint 768px или любое другое.
Код JS для инициализации Owl Carousel 2 на мобильных и дестроя на десктопе:
var $homeSlider = $(".home-slider"); $(window).resize(function() { showHomeSlider(); }); function showHomeSlider() { if ($homeSlider.data("owlCarousel") !== "undefined") { if (window.matchMedia("(max-width: 768px)").matches) { initialHomeSlider(); } else { destroyHomeSlider(); } } } showHomeSlider(); function initialHomeSlider() { $homeSlider.addClass("owl-carousel").owlCarousel({ items: 1, loop: true, autoplay: true, autoplayTimeout: 2000, smartSpeed: 1000 }); } function destroyHomeSlider() { $homeSlider.trigger("destroy.owl.carousel").removeClass("owl-carousel"); }
Пример инициализации Owl Carousel 2 на мобильных и дестроя на десктопе
Для наглядности скройте все вкладки кроме Результата.
See the Pen Owl Carousel Base 3 slides by Denis (@deniscreative) on CodePen.0
Комментарии (54) к “Создание карусели/слайдера с помощью плагина Owl Carousel 2”
Елена
Не нашла,как отобразить функционал добавления слайдов в админке. А вопрос очень животрепещущий. Подскажите, пожалуйста!
Denis Creative
В моей статье нет речи про админку. Я только привел примеры, как добавить owl-carousel на свой сайт.
Если вы используете плагин с Owl Carousel на своем сайте на CMS WordPress, то лучше указать, что за плагин, и более подробно, что не получается.
Денис
Подскажите как сделать что бы на автомате слайды шли слева на право ?
Denis Creative
Добавить
Александр
Добрый день! а как сделать autoplayTimeout рандомным для каждого следующего слайда ?
Denis Creative
Используйте функцию
Math.random()
Дмитрий
Доброго времени дня! Как мне разграничить параметр autoWidth: если у одного слайдера он должен быть autoWidth:!0, а у второго autoWidth:!1.?
palexa
Не понял, куда это добавить на странице ?
Denis Creative
В свой скрипт, должно получиться что-то вроде такого:
Богдан
Богдан
Как сделать чтобы выбранные елементы стали по центру
Denis Creative
Добавьте код на codepen, чтобы было понятно, что нужно и какой вид получается.
Denis Creative
Вероятно
Богдан
вот
https://codepen.io/BohdanITech4Web/pen/QWbZPqK
Denis Creative
Ответ выше:
Твой пример нерабочий, нужно еще подключить стили и скрипты, чтобы на codepen все работало
https://codepen.io/deniscreative/pen/ExjdzVG
И еще – меньше используй id, больше классы и не вставляй div в span.
Богдан
Нужно когда я выбираю эконом или медимум или премимум , чтобы элементы центрировались по центру
Denis Creative
Попробуй
в
startPosition:
или 1, или 2.Богдан
оно не работает
Богдан
сорян забыл подключить, скрипты и стили – все вставил
оно все равно не работает с твоей командой выше
Denis Creative
Что “оно” не работает, и как “оно” должно работать? Вроде, в моем примере все работает, а скрипты и стили подключаются в настройках, где шестеренка.
Роман
Привет, а как сделать что высота блока с каруселью зависела от содержимого? у меня несколько слайдов разной высоты (разное кол-во текста) и высота всего блока получается по высоте самого большого. а нужно чтоб высота плавала в зависимости от того какой высоты слайд показывается.
спасибо заранее!
Denis Creative
Привет, попробуй:
Роман
Денис, спасибо большое! помогло :)
а есть ли ресурс где все опции скрипта расписаны?
Denis Creative
В самом начале статьи есть 2 ссылки на сайт карусели и на все параметры скрипта.)
Роман
Простите за невнимательность :) Вашу статью прочитал подробно, а вот ссылки упустил.
еще раз спасибо за помощь!
Андрей
Здравствуйте, можно сделать чтоб значение не были фиксированными. Вот например: пролистал баннер чуть чуть влево и положение так и остался, а не целиком баннер.
Denis Creative
Такого не встречал.
Андрей
Приветствую, у меня следующий проблем.
Проблема в том что при нажатии на кнопку предыдущего слайда на первом слайде, показывает пустой слайд, потом все нормально листает но от 6ого элемента, т.е. при нажатии повторном на левый тригер стрелку показывает уже 5ый элемент буквально на одну долю секунды показав 6ой. Что можно исправить и как?
Denis Creative
Проверьте верстку, если слайдер работает, то дело не в JS.
Андрей
При всем уважении, но пропадание последнего слайда при перелистывании от 1ого влево наблюдается и в примерах указанных выше, правда в меньшей степени и лиш на долю секунды, у меня же проблема в том что слайдер работает полностью корректно листая вправо, но с первого элемента влево исчезает отображение и появляется только при повторном перелистывании, сам слайд корректно отображается при переходе с предпоследнего, а с первого пропадает, кажется что верстка здесь вовсе не причем а проблема именно в JS
Denis Creative
Попробую отследить этот момент.
У вас на сайте при перелистывании в обе стороны мелькает пустой слайд, поэтому я и предположил, что возможно, в верстке есть незаполненный контентом слайд, возможно слайды строятся на основании цикла, и какой-то элемент пустой. Еще как вариант, у вас в слайдах используется ID, и возможно при клонировании, контент не подгружается в дублирующийся ID, но это просто вариант, потому что не понятно, как этот слайдер создается, я вижу только исходный код с кучей сгенерированных блоков.
Попробуйте создать чистую статичную верстку с аналогичными настройками слайдера, например, на codepen, чтобы задетектить, где проблема – в скрипте, или в верстке.
Dmitry
А можно как-то реализовать, что бы изображения располагались вертикально, но ротация оставалась горизонтальной?
Denis Creative
Каждый слайд – это отдельный блок, внутри которого вы можете как угодно размещать изображения или текст.
Юрий
Скажите, а как сделать, чтобы перелистывался при нажатии на слайд, а не навигации. И еще, чтобы не перелистывался слайд, а сразу появлялся другой. Спасибо заранее.
Denis Creative
Чтобы при нажатии на слайд перелистывался слайдер почитайте в документации в Events.
Для плавного появления слайдов используйте animate.css – в моей статье есть пример под заголовком Как сделать анимированную смену слайдов.
Дмитрий
Почему нет абсолютно никакой информации про динамическое создание блоков в карусели?(
Denis Creative
Потому что это какой-то частный случай, который не нужен для 99.99% пользователей.
Александр
С чего это вы так решили :) Слайдер в моем случае нужно формировать динамически по картинкам из базы данных для каждого товара магазина. И мой случай вряд ли 0,01% -й :) Это достаточно частая задача
Denis Creative
Что в вашем понимании динамически?
Картинки подгружаются при загрузке страницы, не важно, какие они и сколько их, но они загружаются сразу.
А динамически, это чтобы картинки загружались при каких-то событиях, когда карусель уже инициализирована и построена.
Тут
не работает
пишет
Способ поставить загрузку jqwery первым не работает
Denis Creative
Не подключен скрипт карусели
owl.carousel.min.js
Денис
Подскажите как реализовать что бы были картинки с нумерацией в навигации
Denis Creative
Попробуйте такой вариант https://github.com/gijsroge/OwlCarousel2-Thumbs
Денис
Спасибо
Денис
День добрый, подскажите
Как заверстать слайдер часть которого будет за контейнером постоянно на протяжении всего адаптива ?
http://g1t.ru/video/chrome_q3J0mRMZOo.png
http://g1t.ru/video/chrome_SqTsARM1ZA.png
сам слайдер в пределах контейнера, а часть его за пределами контейнера ?
Denis Creative
Можно использовать
и тогда с двух сторон будут видны части слайдов
Или
Можно задать родительскому контейнеру
а контейнеру с каруселью задать
и
Евгений
Подскажите, пожалуйста.
Как в листаемых изображениях сделать активный URL?
Denis Creative
Посмотрите здесь https://owlcarousel2.github.io/OwlCarousel2/demos/urlhashnav.html
Павел
Подскажите, как обойти ситуацию клонирования слайда, если слайдов в карусели всего 1-2, а в items выставлено 4 для текущего разерешения (и да, индивидуально управлять не получается – это шаблонное решение cms)
loop выключен, а клонирование происходит.
попытка использовать аналогичную функцию, как в loop для динамического расчета items рушит весь слайдер.
Denis Creative
Я проверил, с выключенным loop работает, как надо, слайды не клонирует, отображает то количество, что есть:
Здесь пример – https://codepen.io/deniscreative/pen/RwJyQVp
Спасибо большое за оперативный ответ!
На самом деле код несколько сложнее и функция проверки числа записей в слайдере, превышает оно или нет предел по items, для выставления true/false в loop, происходит в рамках инициации responsive массива:
Уже всю голову сломал поперек :(
Denis Creative
1. Считать слайды нужно еще до инициализации слайдера.
2. Функцию надо выносить отдельно.
3. Получается так, вроде, работает, ниже ссылка на пример
Пример на codepen – https://codepen.io/deniscreative/pen/GRGdYwy
Хотя я бы просто поставил
loop:false,
– зачем крутить на мобе 2 слайда…Павел
Спасибо большое за наводну на мысль :)
Denis Creative
Ну как наводку) Я решил проблему полностью, это полноценное решение)