Слайдер на CSS3

Від автора: вітаю вас, шановний читач. Сьогодні ми з вами спробуємо зробити слайдер на css3. Ще кілька років тому таке було просто неможливо, сьогодні ж це можна зробити абсолютно без допомоги javascript, хоча і з деякими застереженнями. Загалом, вивчайте. Тут же можна скачати исходник, щоб подивитися, як воно працює.

До речі, коли ми закінчимо, абсолютно також ви зможете зробити в css адаптивний слайдер, всього лише потрібно буде змінити width у головного контейнера на max-width і поправити зображення.

Визначаємося з фотографіями

Для початку давайте виконаємо не найскладнішу роботу – знайдемо в інтернеті фотографії, які будуть використані в якості слайдів. Припустимо, нехай це будуть тварини. Я знайшов три картинки (наш слайдер буде дуже простим, на три слайда): лева, тигра, пантеру. Треба їх привести до потрібних розмірів.

Відповідно, ви повинні визначити, якою буде розмір слайдера. Наприклад, 500 пікселів в ширину та у висоту 350. Пізніше ми запишемо це у стилі, зараз просто плануємо.

Починаємо з базовою розмітки

Добре, картинки обрані і підготовлені, міні-план в голові є, починаємо з простого html-коду:

Нехай це буде головний контейнер, в якому буде лежати наш майбутній слайдер і кнопки для управління ним. Всю іншу розмітку, яку я буду показувати, потрібно додавати в нього.

Ми створили три радіокнопки, одна з них буде відзначена за замовчуванням. Кожна з них отримує свій, унікальний ідентифікатор. Трохи пізніше ми додамо до них підписи.

Також потрібно додати в розмітку самі блоки для слайдів:

Як бачимо, вони потрапляють в окремий контейнер.

В окремому блоці створюється три так званих підписи до цих кнопок, але в даному випадку вони будуть служити нам для іншого.

За допомогою атрибута for пов’язуємо кожну підпис з однієї з кнопок, це дозволить нам красиво оформити їх. Не самі радіокнопки, тому що на них, на жаль, стилі не діють, а лейбли. Зв’язка дозволяє зробити так, що при натисканні на підпис автоматично стає вибраною і радіо-кнопка, що для нас дуже корисно.

Починаємо все це стилізувати в css

Для початку потрібно визначити стилі для загального контейнера.

.wrap {
height: 350px;
margin: 50px auto 0;
position: relative;
width: 500px;
}

Так ми добиваємося для нього раніше запланованих розмірів, а також дамо невеликий відступ зверху і відносне позиціонування, щоб усередині контейнера всі елементи можна було позиціювати абсолютно.

Наступним дією приховуємо зі сторінки радіокнопки, все одно оформити ми їх не можемо і толку від них немає.

.wrap > input {
display: none;
}

Наступний крок – ми оформляємо сам блок-слайдер і його вміст – слайди.

.slider {
background-color: #333;
height: inherit;
overflow: hidden;
position: relative;
width: inherit;
}
.slides {
height: inherit;
opacity: 0;
position: absolute;
width: inherit;
z-index: 0;
}

Задати ширину і висоту зі значенням inherit ми практично вказуємо, щоб браузер брав ці значення у блоку wrap. Таким чином, ці блоку отримають ширину 500 і висоту 350 пікселів, як нам і потрібно.

Далі вказуємо кожного слайда своє фонове зображення. Оскільки їм вказана прозорість, то ми не побачимо поки ніяких змін. Правда, якщо поміняти opacity з 0 на 1, то ми побачимо нашу пантеру в якості фону, давайте повернемо прозорість на 0.

.img1 { background-image: url(lion.jpg); }
.img2 { background-image: url(tiger.jpg); }
.img3 { background-image: url(pantera.jpg); }

Оформляємо підпису (а по суті наші перемикачі)

Для початку потрібно їх розташувати приблизно по центру. Я зробив це з допомогою абсолютного позиціонування і негативного зовнішнього відступу. Є таке правило центрування за допомогою абсолютного позиціонування: постав координату left: 50%, після чого зроби негативний відступ зліва на половину ширини елемента.

.wrap .control {
position: absolute;
margin-left: -50px;
left: 50%;
}

Ці правила стилізують наш лейбл, а з допомогою псевдоэлемента ми створимо для кнопок рамки і спозиционируем їх.

.wrap label {
cursor: pointer;
display: inline-block;
height: 8px;
margin: 10px;
position: relative;
width: 8px;
border-radius: 20%;
}
.wrap label:after {
border: 2px solid green;
content: “”;
display: block;
height: 12px;
left: -4px;
position: absolute;
top: -4px;
width: 12px;
border-radius: 20%;
}

Також додали закруглення в 20%. Зараз ви побачите тільки три зелених квадратика, тепер залишається зробити так, щоб при кліці по ним в них змінювалися стилі. Для реалізації всього цього ось такі нам потрібні чарівні селектори:

#point1:checked ~ .control label:nth-of-type(1),
#point2:checked ~ .control label:nth-of-type(2),
#point3:checked ~ .control label:nth-of-type(3) {
background: green;
}

А відбувається ось що. За замовчуванням наші лейбли (квадратики) білі і їх не видно, тільки зелені рамки. Цими селекторами ми як би говоримо браузеру: якщо кнопка #point1 обрана користувачем, зміни стилі лейблу під номером 1, якщо ж обрана #point2, застосуй цей стиль для другого лейблу. Я розумію, що вам, можливо, важко все це усвідомити, якщо ви новачок. У цьому прикладі використано два псевдокласу, а також символ ~ який дозволяє вибрати елементи, що лежать за вказаними перед ним селектором. Кілька простих прикладів вам, щоб було зрозуміліше:

Div ~ p – вибере всі абзаци, які в розмітці знаходяться після дівов.

#wrap ~ .item – всі елементи з класом item, які в розмітці знаходяться далі блоку з ідентифікатором wrap. Ті, що перед цим блоком, обрані не будуть.

Я думаю, тепер вам стало зрозуміло. Ну а псевдоклас :checked є одним з нововведень CSS3 і дозволяє застосовувати стилі в залежності від того, обрано радіокнопка або чекбокс чи ні.

Отже, з роз’ясненнями на цьому все, тому що зараз належить саме головне, змусити всі, нарешті, заробити! Додаємо чергові чарівні селектори:

#point1:checked ~ .slider > .img1,
#point2:checked ~ .slider > .img2,
#point3:checked ~ .slider > .img3 {
opacity: 1;
z-index: 1;
}

Тут бачимо використання :checked і ~ знову, але оскільки я вам вже пояснив їх, то ви можете здогадатися, що роблять ці селектори. А ось, по суті, яка команда віддається браузеру: коли людина вибере першу кнопку, зроби видимим відповідне фото. Як бачите, ми змінюємо z-index, тобто номер шару, а також прибираємо повну прозорість, замінивши її на повну непрозорість.

Оскільки раніше ми з вами з css прописали для кожного слайда своє фонове зображення, тепер вони будуть підставлятися і ставати видимими. Автоматично після завантаження сторінки в слайдері з’явитися зображення лева, при кліці по другій кнопці – тигр, при кліку по третин – пантера. Наш слайдер працює безвідмовно!

Та сама застереження

На початку я говорив, що з появою css3 можна зробити слайдер чисто за рахунок цієї технології, без використання скриптів, але з деякими застереженнями. Так от, як ви розумієте, створений нами слайдер не буде сам перемикати слайди, це можливо тільки до тих пір, поки людина клікає по кнопках. Так, потрібно враховувати такі обмеження.

Додавання ефектів і додаткових слайдів

Таким чином, ви можете додати необмежену кількість нових слайдів. Для цього вам всього лише треба додати:

Плюс не забути додати нові селектори в таблицю стилів. Також я хотів би сказати, що в цій статті ми з вами реалізували дуже простий слайдер. Без наворотів, як говориться.

Додати ефекти насправді не дуже складно. Лише додайте плавний перехід до слайдів, а також бажані перетворення.

.slides{
transform: rotate(55deg);
-webkit-filter: hue-rotate(90deg);
transition: 1s;
}

Тепер фотографії нахилені на 55 градусів, а також до них застосовано поворот кольору в 90 градусів. Але з-за того, що слайди за замовчуванням приховані, ми всього цього не побачимо. Так і треба, зате ми побачимо скасування цих ефектів, коли буде перемикати слайди. Оскільки заданий плавний перехід, скасування ефектів буде відбуватися плавно, і ми побачимо, як фотографії поврачиваются в нормальний стан, а також побачимо переливання кольорів.

#point1:checked ~ .slider > .img1,
#point2:checked ~ .slider > .img2,
#point3:checked ~ .slider > .img3{
opacity: 1;
z-index: 1;
transform: none;
-webkit-filter: none;
}

Зрозуміли суть? Ми поставили ефект невидимим зображень, а при їх появі ми встигаємо помітити скасування ефектів. Тут я, звичайно, не використовував всі необхідні вендорные префікси, щоб все працювало і в старих браузерах, але це тільки заради економії місця і часу. Загалом, додавання цих ефектів я зробив тільки заради прикладу, на ділі ми можете додати свої ефекти, які захочете.

Мабуть, на цьому я закінчу сьогоднішню статтю. Ми з вами зробили слайдер з красивим ефектів перегортання появи нових фотографій. Звичайно, він має явні мінуси, але зате це слайдер на чистому css3. Ну а дізнатися більше про цю технологію ви можете з нашого курсу, там же ви можете краще розібратися з новими селекторами.