Строительная компания » »

Make a beautiful carousel with carouFredSel

Опубликовано: 10.01.2018

видео Make a beautiful carousel with carouFredSel

Make it With HTML and CSS #1: Pure CSS Carousel

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

В проектах, с которыми мы работали, была карусель. У нас были идеи о том, как мы можем сделать эту работу, используя CSS-анимации и transform property, но это дало бы карусель, прокручивающуюся автоматически и не разрешающую пользовательский ввод, что мам не было нужно, на сайте Make a beautiful carousel with carouFredSel. Немного подумав, мы приняли решение, которое использует абсолютное позиционирование и : 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 элементов, чтобы сделать их более яркими, но мы оставим это ниже, чтобы наша разметка была более читаемой.


Baby Shower Carousel Wishes Centerpiece / DIY / Tutorial how to create this Carousel Centerpiece


How to install beautiful image carousels on any WordPress web page

rss