Як створити карусель використовуючи тільки HTML і CSS

12

Від автора: недавно я працював з сайтом 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 щоб зробити їх трохи жвавіше. Запишемо це трохи пізніше, щоб наша розмітка виглядала читаемо.




Слайд 1

Тут контент.

Слайд 2

Контент.

Item 3

Content goes here.

Це наша розмітка. Напрочуд легка. А ось в CSS (SCSS в нашому випадку) творяться справжні чудеса.

Стилі

/* Тут починається наша карусель. Блок .carousel-wrapper пропонується відносно, абертки .carousel-item абсолютно.
. */
.carousel-wrapper{
position:relative;
/* Абсолютно позиціонували як блоки отримують висоту і ширину від батьків.
Ми зробили їх прозорими за замовчуванням, і потім вони будуть плавно з’являтися після натискання на посилання .arrow-prevи .arrow-next. */
.carousel-item{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
padding:25px50px;
opacity:0;
transition:all0.5sease-in-out;
/* Помітили padding зліва і праворуч по 50px? Таким способом ми можемо навести наші посилання! Кожна з 50px шириною. Крім того, я використовую порожні посилання з фоновим малюнком таким чином, що посилання виглядають як стрілки. Перевірте, чи поміняли ви URL посилань з оригінальним URL, щоб ваші посилання не були просто прозорими прямокутниками. */
.arrow{
position:absolute;
top:0;
display:block;
width:50px;
height:100%;
-webkit-tap-highlight color:rgba(0,0,0,0);
background:url(«/carousel-arrow-dark.png»)50%50%/20pxno-repeat;
/* Давайте повернемо нашу стрілку ліворуч. */
&.arrow-prev{
left:0;
}
/* А другу направо. Оскільки я використовую одне і те ж зображення стрілки, я повертаю його на 180 градусів. */
&.arrow-next{
right:0;
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}
}
/* Мені дуже подобається, як слайди каруселі виглядають на темному тлі, і якщо блок .carousel-itemимеет клас ‘light’,
ми змінимо його текст на білий і використовуємо білі стрілки замість сірих. Перевірте, чи правильно вказано шлях до зображення стрілки */
&.light{
color:white;
.arrow{
background:url(«/carousel-arrow-light.png»)50%50%/20pxno-repeat;
}
}
/* Напишемо медіа-запит для зміни розміру стрілок на пристроях з меншим розміром екрана.*/
@media(max-width:480px){
.arrow,&.light.arrow{
background-size:10px;
background-position:10px50%;
}
}
}
/* Встановимо цілям для посилань значення display: none; Таким чином, ми позбавляємося від постійного перестрибування браузера в самий верх каруселі при кожному натисканні стрілки. Це властивість діє для будь-яких елементів, чий ідентифікатор починається на ‘target-item’. */
[id^=»target-item»]{
display:none;
}
/* Вище ми зробили всі наші слайди каруселі прозорими, а це означає, що під час завантаження каруселі ми будемо отримувати замість неї велике порожнє поле.
Змінимо значення прозорості для першого слайда на 1 для відображення. Так само встановлюємо z-index значення 2, позиціонуючи його вище інших слайдів. */
.item-1{
z-index:2;
opacity:1;
}
/* Але нам не потрібно, щоб перший слайд завжди мав значення прозрачностиopacity: 1; в іншому випадку нам доведеться пробиратися через цей слайд, під час ротації інших. */
*:target~.item-1{
opacity:0;
}
/* ..але якщо #target-item-1 в фокусі, і ми хочемо показати перший слайд, тоді вибираємо його за допомогою значка ~ і встановлюємо прозорість знову в 1:-) */
#target-item-1:target~.item-1{
opacity:1;
}
/* Якщо інші target-item-# у фокусі, вибираємо їх використовуючи ~ селектор, плавно показуємо, і розміщуємо їх зверху з помощьюz-index: 3.
Тут ви можете додати додаткові ѕрапс ідентифікатором target-item, якщо їх у вас буде більше трьох. Може відразу і додати 10 штук.. */
#target-item-2:target~.item-2,#target-item-3:target~.item-3{
z-index:3;
opacity:1;
}
}

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