Как сделать карусель на сайте css html

Как создать карусель, используя только HTML и CSS без JavaScript!

carousel

В последнее время мы работали над сайтом, который использует CMS, что немного ограничивает. Мы можем добавить свой собственный HTML и CSS на сайт, но не JavaScript.

В проектах, с которыми мы работали, была карусель. У нас были идеи о том, как мы можем сделать эту работу, используя CSS-анимации и transform property, но это дало бы карусель, прокручивающуюся автоматически и не разрешающую пользовательский ввод, что мам не было нужно. Немного подумав, мы приняли решение, которое использует абсолютное позиционирование и :target псевдо-селектор для изменения z-index и opacity нашей карусели, чтобы циклировать через них.

Давайте создадим такое!

Структура

Структура нашей карусели выглядит примерно так: у нас есть главный div.carousel-wrapper, который дает нашей карусели размер. Внутри нашей оболочки, у нас есть span.hidden-target элементы с уникальными идентификаторами, которые действуют в качестве мишеней для наших пунктов управления карусели и div.carousel-item элементов, которые содержат контент каждого из пунктов карусели.

Каждый из div.carousel-item элементов будет иметь контент, и две ссылки, a.arrow-prev и a.arrow-next, который мы используем для цикла между элементами карусели.

Потому что наши отдельные элементы карусели будут position: absolute (мы можем сложить их на вершине друг друга), мы должны установить высоту div.carousel-wrapper вручную. Мы собираемся попытаться разгрузить CSS к нашей внешней таблицы стилей, но некоторые из пунктов мы должны будем написать, чтобы сделать нашу карусель используемой и масштабируемой.

Мы также используем CSS, чтобы установить фоновое изображение из двух наших div.carousel-item элементов, чтобы сделать их более яркими, но мы оставим это ниже, чтобы наша разметка была более читаемой.

Вот и весь HTML. Он удивительно легкий. В CSS (SCSS, в данном случае), вот где происходит волшебство.

Стили

У вас есть карусель, которая полностью функциональна и на 100% состоит из HTML и CSS! Мы создали карусель с тремя элементами, но вы можете продолжать добавлять элементы, убедитесь, что вы добавляете больше целевых элементов, и связываете ваши ссылки правильно.

Ant-карусель на CSS и Javascript

С появлением CSS3 появилась возможность совершать анимацию без использования JS-библиотек, таких, например, как jQuery. CSS3 свойство transition позволяет плавно изменять другие свойства элемента (width, height, margin, opacity и пр.), задав в качестве параметров время и закон трансформации. Предлагаю небольшую по размерам, но достаточно функциональную карусель на чистом Javascript. Небольшую, как муравей, что гораздо меньше чем сова. Но почти с такими же возможностями.

  • показывать один или несколько элементов;
  • элементы могут быть показаны в виде конечной или бесконечной ленты (в цикле);
  • автопрокрутка элементов;
  • навигация осуществляется стрелками, индикаторными точками или перелистыванием (для тактильных экранов);
  • автоматически подстраивается под любую ширину экрана.

Здесь использованы элементы <ul><li>, но вместо них можно использовать <div > <div >, если вам это удобнее. Стрелки и индикаторные точки располагаются абсолютным позиционированием в соответствующих контейнерах. Для стрелок используются рисунки в виде треугольных скобок, которые, при желании, вы можете заменить своими рисунками или генерацией изображения псевдо-элементами :before и :after.

Создаём карусель с тремя видимыми элементами и шириной элемента 270 пикселей. Тогда максимальная ширина карусели 810 пикселей. Подключаем CSS-файл:

Располагаем элементы в контейнере ant-carousel-list, устанавливаем для него свойство display: flex и прижимаем все элементы к левому краю justify-content: flex-start. Свойство flex: 0 0 auto устанавливает flex-shrink в 0 (по умолчанию 1). Прокрутка элементов карусели осуществляется при помощи свойства transiton плавным изменением отступа margin-left от нуля до ширины элемента (в одну сторону) или от ширины элемента до нуля (в другую сторону). Для функции трансформации (прокрутки) используется значение ease.

Переходим к программе. В опциях программы можно настраивать:

  • количество видимых элементов;
  • просмотр элементов в виде ленты от первого до последнего или в бесконечном цикле (лента замыкается в кольцо);
  • автоматическая или ручная прокрутка элементов;
  • интервал автоматической прокрутки;
  • скорость анимации;
  • включение/отключение элементов навигации: стрелки, индикаторные точки, перелистывание прикосновением (для тактильных экранов).

Алгоритм прокрутки элементов отличается в зависимости от того, включена опция цикла или нет. Если включена, при прокрутке вправо (функция elemPrev) свойство margin-left всей линейки элементов this.crslList уменьшается от нуля до отрицательного значения, равного ширине элемента elemWidth. Одновременно последний элемент справа клонируется и вставляется перед первым элементом, после чего последний элемент удаляется. Линейке присваивается свойство ‘transition: margin ‘+ options.speed+’ms ease’, где options.speed – скорость анимации, ease – функция анимации. Теперь можно осуществлять прокрутку. Свойство margin-left плавно меняется от отрицательного значения до нуля, вся линейка плавно смещается вправо и элемент, который был последним, оказывается на первом месте. Спустя options.speed микросекунд линейке присваивается прежнее значение ’transition: none’.

Если нужно прокрутить n элементов одновременно, перестановка элементов осуществляется в цикле n раз, а расстояние margin-left увеличивается в n раз.

Прокрутка влево (функция elemNext) происходит в обратном порядке. Сначала линейке this.crslList присваивается свойство ‘transition: margin ‘+ options.speed+’ms ease’ и линейка плавно прокручивается влево (crslList.style.marginLeft = ‘-‘ + elemWidth + ‘px’). Далее спустя options.speed микросекунд первый элемент клонируется и вставляется в конец линейки, после чего первый элемент удаляется. Линейке возвращается значение ‘transition: none’. Если нужно прокрутить n элементов одновременно, перестановка элементов так же, как и в предыдущем случае, осуществляется в цикле n раз и расстояние margin-left увеличивается в n раз.

Если опция цикла выключена, то в этом случае перестановок элементов нет, а вся линейка элементов смещается как единое целое влево или вправо до своих крайних точек. Линейке элементов this.crslList свойство ‘transition: margin ‘+ options.speed+’ms ease’ присваивается ещё при инициализации карусели и больше не удаляется.

Вызов карусели производится по имени класса ant-carousel или по идентификатору. Во втором случае можно разместить несколько каруселей на одной странице. Файл index.html с каруселью может выглядеть так:

Чтобы разместить нескольких каруселей на одной странице нужно вызывать их по идентификатору. Разные карусели могут иметь разное количество элементов.

Создание карусели/слайдера с помощью плагина Owl Carousel 2

Самый популярный плагин для карусели на jQuery &#8211; Owl Carousel 2.

Подключение Owl Carousel 2 на своем сайте

CSS &#8211; подключаем файлы стилей для карусели Owl Carousel 2

Подключаем в хедере, в примере абсолютные пути на CDN, но лучше подключать стили и скрипты со своего сайта.

JS &#8211; подключаем необходимые скрипты для Owl Carousel 2

Подключаем в футере jQuery, библиотеку OwlCarousel2 и свйо файл скриптов, в котором инициализируем и настраиваем слайдер.
Здесь указаны абсолютные ссылки на CDN, но лучше подключать все стили и скрипты со своего сайта, предварительно скачав все файлы по этой ссылке.

HTML &#8211; HTML-код самой карусели Owl Carousel 2

Самая простая и базовая разметка для понимания, в каждом слайде может быть любое количество блоков и элементов.

Пример слайдера Owl Carousel 2 с тремя слайдами:

Содержимое файла script.js

Пример слайдера Owl Carousel 2 с тремя слайдами:

Чтобы задать кастомные стрелки, например, это нужно для какого-то конкретного слайдера по дизайну, добавляем:

Чтобы использовать базовые стили для навигации из файла owl.theme.default.min.css , необходимо добавить класс owl-theme к контейнеру карусели:

Можно вынести стрелки навигации за контейнер карусели, данный код добавляем после инициализации карусели:

Делаем карусель адаптивной:

Простая расшифровка &#8211; ширина экрана от 0 до 768px &#8211; выводится 1 слайд, от 768px до 1180px &#8211; выводится 2 слайда, ширина экрана больше 1180px &#8211; отображается по 3 слайда в карусели.

Как добавить видео в карусель Owl Carousel:

1. Добавляем в options:

2. Используем такую разметку для HTML:

3. В данном примере еще используется такое правило в CSS:

Пример вывода видео в слайдере Owl Carousel:

Как сделать анимированную смену слайдов

Сначала подключаем дополнительно файл стилей animate.css, можно отсюда:

А затем в опции карусели добавляем, например, эффект затухания:

На примере ниже установлены такие опции для анимации слайдов:

Пример реализации анимированной карусели Owl Carousel:

Пример разрушения слайдера для обычного экрана и использование слайдера только для мобильных телефонов

Суть задачи в том ,что на десктопной версии нам не нужен слайдер, а нужно, чтобы блоки были друг за другом в несколько рядов, а вот на мобильной версии сайта, чтобы не размещать кучу блоков друг под другом, мы сделаем просто слайдер, в котором разместятся все блоки, но по высоте эта вся секция займет всего один блок.

Нужно немного правок внести в стили CSS, а так же поменять код инициализации карусели, весь скрипт расписывать не буду, основная суть его в том, что при ширине экрана больше 600px &#8211; карусель разрушается и остаются просто блоки внутри контейнера, а при ширине экрана меньше 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

Твой пример нерабочий, нужно еще подключить стили и скрипты, чтобы на codepen все работало
https://codepen.io/deniscreative/pen/ExjdzVG

И еще &#8211; меньше используй id, больше классы и не вставляй div в span.

Богдан

Нужно когда я выбираю эконом или медимум или премимум , чтобы элементы центрировались по центру

Denis Creative

в startPosition: или 1, или 2.

Богдан

оно не работает

Богдан

сорян забыл подключить, скрипты и стили &#8211; все вставил
оно все равно не работает с твоей командой выше

Denis Creative

Что &#8220;оно&#8221; не работает, и как &#8220;оно&#8221; должно работать? Вроде, в моем примере все работает, а скрипты и стили подключаются в настройках, где шестеренка.

Роман

Привет, а как сделать что высота блока с каруселью зависела от содержимого? у меня несколько слайдов разной высоты (разное кол-во текста) и высота всего блока получается по высоте самого большого. а нужно чтоб высота плавала в зависимости от того какой высоты слайд показывается.
спасибо заранее!

Denis Creative
Роман

Денис, спасибо большое! помогло 🙂
а есть ли ресурс где все опции скрипта расписаны?

Denis Creative

В самом начале статьи есть 2 ссылки на сайт карусели и на все параметры скрипта.)

Роман

Простите за невнимательность 🙂 Вашу статью прочитал подробно, а вот ссылки упустил.
еще раз спасибо за помощь!

Андрей

Здравствуйте, можно сделать чтоб значение не были фиксированными. Вот например: пролистал баннер чуть чуть влево и положение так и остался, а не целиком баннер.

Denis Creative

Такого не встречал.

Андрей

Приветствую, у меня следующий проблем.
Проблема в том что при нажатии на кнопку предыдущего слайда на первом слайде, показывает пустой слайд, потом все нормально листает но от 6ого элемента, т.е. при нажатии повторном на левый тригер стрелку показывает уже 5ый элемент буквально на одну долю секунды показав 6ой. Что можно исправить и как?

Denis Creative

Проверьте верстку, если слайдер работает, то дело не в JS.

Андрей

При всем уважении, но пропадание последнего слайда при перелистывании от 1ого влево наблюдается и в примерах указанных выше, правда в меньшей степени и лиш на долю секунды, у меня же проблема в том что слайдер работает полностью корректно листая вправо, но с первого элемента влево исчезает отображение и появляется только при повторном перелистывании, сам слайд корректно отображается при переходе с предпоследнего, а с первого пропадает, кажется что верстка здесь вовсе не причем а проблема именно в JS

Denis Creative

Попробую отследить этот момент.

У вас на сайте при перелистывании в обе стороны мелькает пустой слайд, поэтому я и предположил, что возможно, в верстке есть незаполненный контентом слайд, возможно слайды строятся на основании цикла, и какой-то элемент пустой. Еще как вариант, у вас в слайдах используется ID, и возможно при клонировании, контент не подгружается в дублирующийся ID, но это просто вариант, потому что не понятно, как этот слайдер создается, я вижу только исходный код с кучей сгенерированных блоков.

Попробуйте создать чистую статичную верстку с аналогичными настройками слайдера, например, на codepen, чтобы задетектить, где проблема &#8211; в скрипте, или в верстке.

Dmitry

А можно как-то реализовать, что бы изображения располагались вертикально, но ротация оставалась горизонтальной?

Denis Creative

Каждый слайд &#8211; это отдельный блок, внутри которого вы можете как угодно размещать изображения или текст.

Скажите, а как сделать, чтобы перелистывался при нажатии на слайд, а не навигации. И еще, чтобы не перелистывался слайд, а сразу появлялся другой. Спасибо заранее.

Denis Creative

Чтобы при нажатии на слайд перелистывался слайдер почитайте в документации в Events.
Для плавного появления слайдов используйте animate.css &#8211; в моей статье есть пример под заголовком Как сделать анимированную смену слайдов.

Дмитрий

Почему нет абсолютно никакой информации про динамическое создание блоков в карусели?(

Denis Creative

Потому что это какой-то частный случай, который не нужен для 99.99% пользователей.

не работает
пишет

Способ поставить загрузку jqwery первым не работает

Denis Creative

Не подключен скрипт карусели owl.carousel.min.js

Денис

Подскажите как реализовать что бы были картинки с нумерацией в навигации owl carousel 2

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *