Как сделать карусель на js
Обновлено: 05.07.2024
Компонент слайд-шоу для циклического перехода по элементам - изображениям или текстовым слайдам - например, карусели.
Как это работает
Карусель - это слайд-шоу для циклического просмотра серии контента, созданного с помощью преобразований CSS 3D и небольшого количества JavaScript. Он работает с серией изображений, текста или пользовательской разметки. Он также включает поддержку предыдущих/следующих элементов управления и индикаторов.
В браузерах, где поддерживается API видимости страницы, карусель не будет скользить, когда веб-страница не видна пользователю (например, когда браузер вкладка неактивна, окно браузера свернуто и т.д.).
Эффект анимации этого компонента зависит от медиазапроса prefers-reduced-motion . См. раздел с уменьшенным движением в нашей документации по специальным возможностям.
Имейте в виду, что вложенные карусели не поддерживаются, а карусели обычно не соответствуют общедоступным стандартам.
Пример
Карусели не нормализуют автоматически размеры слайдов. Таким образом, Вам может потребоваться использовать дополнительные утилиты или настраиваемые стили для соответствующего размера содержимого. Хотя карусели поддерживают элементы управления и индикаторы предыдущий/следующий, они явно не требуются. Добавляйте и настраивайте по своему усмотрению.
Класс .active необходимо добавить к одному из слайдов, иначе карусель не будет видна. Также не забудьте установить уникальный идентификатор id в .carousel для дополнительных элементов управления, особенно если Вы используете несколько каруселей на одной странице. Элементы управления и индикатора должны иметь атрибут data-bs-target (или href для ссылок), который соответствует идентификатору id элемента .carousel .
Только слайды
Вот карусель только со слайдами. Обратите внимание на наличие .d-block и .w-100 на изображениях карусели, чтобы предотвратить выравнивание изображений по умолчанию в браузере.
Самый популярный плагин для карусели на jQuery – Owl Carousel 2.
Подключение Owl Carousel 2 на своем сайте
CSS – подключаем файлы стилей для карусели Owl Carousel 2
Подключаем в хедере, в примере абсолютные пути на CDN, но лучше подключать стили и скрипты со своего сайта.
JS – подключаем необходимые скрипты для Owl Carousel 2
Подключаем в футере jQuery, библиотеку OwlCarousel2 и свйо файл скриптов, в котором инициализируем и настраиваем слайдер.
Здесь указаны абсолютные ссылки на CDN, но лучше подключать все стили и скрипты со своего сайта, предварительно скачав все файлы по этой ссылке.
HTML – HTML-код самой карусели Owl Carousel 2
Самая простая и базовая разметка для понимания, в каждом слайде может быть любое количество блоков и элементов.
Пример слайдера Owl Carousel 2 с тремя слайдами:
Содержимое файла script.js
Пример слайдера Owl Carousel 2 с тремя слайдами:
Чтобы задать кастомные стрелки, например, это нужно для какого-то конкретного слайдера по дизайну, добавляем:
Чтобы использовать базовые стили для навигации из файла owl.theme.default.min.css , необходимо добавить класс owl-theme к контейнеру карусели:
Можно вынести стрелки навигации за контейнер карусели, данный код добавляем после инициализации карусели:
Делаем карусель адаптивной:
Простая расшифровка – ширина экрана от 0 до 768px – выводится 1 слайд, от 768px до 1180px – выводится 2 слайда, ширина экрана больше 1180px – отображается по 3 слайда в карусели.
Как добавить видео в карусель Owl Carousel:
1. Добавляем в options:
2. Используем такую разметку для HTML:
3. В данном примере еще используется такое правило в CSS:
Пример вывода видео в слайдере Owl Carousel:
Как сделать анимированную смену слайдов
Сначала подключаем дополнительно файл стилей animate.css, можно отсюда:
А затем в опции карусели добавляем, например, эффект затухания:
На примере ниже установлены такие опции для анимации слайдов:
Пример реализации анимированной карусели Owl Carousel:
Пример разрушения слайдера для обычного экрана и использование слайдера только для мобильных телефонов
Суть задачи в том ,что на десктопной версии нам не нужен слайдер, а нужно, чтобы блоки были друг за другом в несколько рядов, а вот на мобильной версии сайта, чтобы не размещать кучу блоков друг под другом, мы сделаем просто слайдер, в котором разместятся все блоки, но по высоте эта вся секция займет всего один блок.
Нужно немного правок внести в стили CSS, а так же поменять код инициализации карусели, весь скрипт расписывать не буду, основная суть его в том, что при ширине экрана больше 600px – карусель разрушается и остаются просто блоки внутри контейнера, а при ширине экрана меньше 600px происходит инициализация карусели, и мы вместо длинной простыни блоков на мобильном видим аккуратный слайдер с этими самыми блоками.
В моем примере я использую граничное значение 600px, чтобы результат точно отобразился внутри контента моего сайта, но для мобильных вы можете использовать breakpoint 768px или любое другое.
Код JS для инициализации Owl Carousel 2 на мобильных и дестроя на десктопе:
Пример инициализации Owl Carousel 2 на мобильных и дестроя на десктопе
Для наглядности скройте все вкладки кроме Результата.
Рекомендую к прочтению:
Комментарии (44) к “Создание карусели/слайдера с помощью плагина 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
Богдан
Denis Creative
И еще – меньше используй id, больше классы и не вставляй div в span.
Богдан
Нужно когда я выбираю эконом или медимум или премимум , чтобы элементы центрировались по центру
Denis Creative
в startPosition: или 1, или 2.
Богдан
оно не работает
Богдан
сорян забыл подключить, скрипты и стили – все вставил
оно все равно не работает с твоей командой выше
Denis Creative
Что “оно” не работает, и как “оно” должно работать? Вроде, в моем примере все работает, а скрипты и стили подключаются в настройках, где шестеренка.
Роман
Привет, а как сделать что высота блока с каруселью зависела от содержимого? у меня несколько слайдов разной высоты (разное кол-во текста) и высота всего блока получается по высоте самого большого. а нужно чтоб высота плавала в зависимости от того какой высоты слайд показывается.
спасибо заранее!
Denis Creative
Роман
Денис, спасибо большое! помогло :)
а есть ли ресурс где все опции скрипта расписаны?
Denis Creative
В самом начале статьи есть 2 ссылки на сайт карусели и на все параметры скрипта.)
Роман
Простите за невнимательность :) Вашу статью прочитал подробно, а вот ссылки упустил.
еще раз спасибо за помощь!
Андрей
Здравствуйте, можно сделать чтоб значение не были фиксированными. Вот например: пролистал баннер чуть чуть влево и положение так и остался, а не целиком баннер.
Denis Creative
Такого не встречал.
Андрей
Denis Creative
Проверьте верстку, если слайдер работает, то дело не в JS.
Андрей
При всем уважении, но пропадание последнего слайда при перелистывании от 1ого влево наблюдается и в примерах указанных выше, правда в меньшей степени и лиш на долю секунды, у меня же проблема в том что слайдер работает полностью корректно листая вправо, но с первого элемента влево исчезает отображение и появляется только при повторном перелистывании, сам слайд корректно отображается при переходе с предпоследнего, а с первого пропадает, кажется что верстка здесь вовсе не причем а проблема именно в JS
Denis Creative
Попробую отследить этот момент.
У вас на сайте при перелистывании в обе стороны мелькает пустой слайд, поэтому я и предположил, что возможно, в верстке есть незаполненный контентом слайд, возможно слайды строятся на основании цикла, и какой-то элемент пустой. Еще как вариант, у вас в слайдах используется ID, и возможно при клонировании, контент не подгружается в дублирующийся ID, но это просто вариант, потому что не понятно, как этот слайдер создается, я вижу только исходный код с кучей сгенерированных блоков.
Попробуйте создать чистую статичную верстку с аналогичными настройками слайдера, например, на codepen, чтобы задетектить, где проблема – в скрипте, или в верстке.
Dmitry
А можно как-то реализовать, что бы изображения располагались вертикально, но ротация оставалась горизонтальной?
Denis Creative
Каждый слайд – это отдельный блок, внутри которого вы можете как угодно размещать изображения или текст.
Скажите, а как сделать, чтобы перелистывался при нажатии на слайд, а не навигации. И еще, чтобы не перелистывался слайд, а сразу появлялся другой. Спасибо заранее.
Denis Creative
Чтобы при нажатии на слайд перелистывался слайдер почитайте в документации в Events.
Для плавного появления слайдов используйте animate.css – в моей статье есть пример под заголовком Как сделать анимированную смену слайдов.
Дмитрий
Почему нет абсолютно никакой информации про динамическое создание блоков в карусели?(
Denis Creative
Потому что это какой-то частный случай, который не нужен для 99.99% пользователей.
не работает
пишет
Способ поставить загрузку jqwery первым не работает
Denis Creative
Не подключен скрипт карусели owl.carousel.min.js
Денис
Подскажите как реализовать что бы были картинки с нумерацией в навигации
По сути, карусель отличается от слайдера только тем, что слайдер показывает в конкретный момент времени только один элемент списка, а карусель несколько. Хотя многие люди воспринимают и карусель и слайдер как один и тот же элемент интерфейса, только с разным дизайном. Мы будем делать карусель. Но полученные знания можно будет применить для создания слайдера. Хочу напомнить, что статья ориентирована на новичков и ее цель показать принцип работы и внутреннее устройство карусели/слайдера. В реальных проектах лучше использовать готовые решения (возможно собственной разработки), чем писать все самому. Хотя иногда и это имеет смысл.
Для начала создадим обычный документ html. Назовем его index.html:
Теперь нам нужно создать структуру самой карусели. Пускай каждый элемент нашей jQuery карусели будет состоять из картинки и небольшого текста. Как-то так:
Приведем немного нашу карусель в порядок простым CSS кодом. Для этого подключим сам CSS файл:
Потом допишем классы к нашим элементам:
И теперь самое главное, сам CSS код:
Ничего не обычного. Зато страничка приобрела нормальный вид:
Сейчас наша будущая карусель похожа на простой список. Что бы она стала похожа на карусель, нужно завернуть ее в дополнительный блок (div), который скроет часть элементов. Этот блок я называю хайдер. Добавим его в html:
Теперь нужно сделать так, что бы ширина самого списка не была ограничена, а вот хайдер был с ограниченной шириной. Зачем это нужно, станет понятно чуть позже. Изменим для этого код самого списка:
А так же добавим код для хайдера:
Теперь получилось вот так:
Как видите, теперь часть элементов просто скрыта. Теперь нам нужно добавить элементы прокрутки. Это могут быть картинки (обычно стрелки) или просто текст. Мы добавим обычный текст. Для этого в html добавим строчки кода с нашими элементами управления:
А после поправим CSS, что бы элементы управления каруселью нормально отобразились. Теперь весь CSS код будет выглядеть так:
Мы добавили атрибут float для элементов управления и самого хайдера. Кому-то может показаться странным зачем нужен floar со значением left для правого элемента управления. Дело в том, что если ему не задать float, он будет растягиваться на всю ширину пространства. В дальнейшем, когда мы захотим приукрасить элементы управления, это будет нам мешать.
Таким образом страница стала выглядеть вот так:
Получилось вот что:
Приведем в порядок наши элементы управления. Пускай они будут похожи на кнопки:
Ничего особенного. Получилось вот так:
Наконец-то мы подошли к самому интересному. Осталось запрограммировать нашу карусель. Добавим в наш маленький учебный проект два JavaScript файла. Пустой файл slider.js и сам jQuery.js. Я использовал jQuery версии 2.1.3:
Теперь, нам нужно повесить event’ы на наши элементы управления:
Ширина каждого элемента списка — 125 пикселей, как мы уже посчитали выше. То есть, что бы прокрутить карусель на один элемент вправо, нужно задать значение left списка в -125 пикселей. А если мы хотим прокрутить влево, то просто 125 пикселей. На JS мы будем при каждом клике либо добавлять либо отнимать 125 пикселей. Для анимации прокручивания мы будем использовать функцию jquery — animate(..). Первые ее аргумент это массив параметров css для анимации, второй время анимации, третий callback (функция, которая выполниться после анимации). Получается вот так:
Сегодня я расскажу о том, как создать анимированный, отзывчивый, полноэкранный слайдер для сайта с помощью 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 файлами.
Если у вас не подключен jQuery, то добавьте его с помощью CDN (пример ниже). Также скачайте и подключите owl.carousel.min.js
Разметка HTML
Нам не нужна никакая особая разметка. Все что требуется, чтобы создать слайдер для сайта — это обернуть наши слайды элементом div с классом owl-carousel . Этот класс является обязательным. Также, если вы хотите использовать навигационные элементы по умолчанию, нужно добавить класс owl-theme к этому же div-у.
jQuery слайдер
для сайта
Owl Carousel 2
настройка
Создадим 2 слайда, каждый из которых будет содержать заголовок, кнопку и фоновое изображение.
Вы можете создать любую разметку слайдов и добавить к ней какие угодно стили.
Вызов плагина
Далее мы вызовем функцию инициализатор в js и наша карусель готова.
Owl Carousel 2 имеет дополнительные опции, которые помогут вам кастомизировать ваш слайдер. Давайте разберем самые популярные из них:
Читайте также: