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

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

От автора: недавно я работал с сайтом, CMS которого имела слегка неполный функционал. JavaScript был отключен, и я мог добавлять только свой HTML и CSS код. Дизайн, над которым я работал, включал в себя карусель. У меня было пару идей, как написать ее, используя CSS-анимации и свойство transform.

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

Структура

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

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

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

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

Это наша разметка. На удивление легкая. А вот в CSS (SCSS в нашем случае) творятся настоящие чудеса.

Стили

И вуаля! Теперь у вас полностью функционирующая карусель, написанная только на HTML и CSS на 100%! Мы сделали всего 3 слайда, но вы можете добавлять свои слайды. Необходимо всего лишь убедиться, что добавлены блоки-ссылки span, и что вы правильно связываете с ними ссылки-стрелки.

Автор: Daniel Cortes

Источник: //dancort.es/

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии (2)