Как создать карусель используя только 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 код, но чтобы потом использовать нашу карусель повторно и сделать ее масштабируемой, некоторые свойства придется прописать строго в тегах.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

Стили

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

Автор: Daniel Cortes

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки:

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

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

Комментарии Facebook:

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

  1. Алексей

    https://jsfiddle.net/56nvu5wu/3/ не работает карусель. Почему так ?

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree