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

0

В последнее время я работаю над сайтом, который использует 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! Мы создали карусель с тремя элементами, но вы можете продолжать добавлять элементы, убедитесь, что вы добавляете больше целевых элементов, и связываете ваши ссылки правильно.

 Перевод статьи

Поделиться: