Я никому не открою Америку, не удивлю публику новым фокусом и не взорву тем, кто в CSS3 плавает, как аквалангист. Расскажу простой способ, как создать слайдер с помощью простых функций CSS3 без необходимости использовая javascript.
1. Верстаем основу
Для реализации слайдера нам понадобится довольно простой набор тэгов, которые будут в свою очередь отвечать за элементы слайдера.
<div class="wrapper">
<input type="radio" name="point" id="slide1" checked>
<input type="radio" name="point" id="slide2">
<input type="radio" name="point" id="slide3">
<input type="radio" name="point" id="slide4">
<input type="radio" name="point" id="slide5">
<div class="slider">
<div class="slides slide1"></div>
<div class="slides slide2"></div>
<div class="slides slide3"></div>
<div class="slides slide4"></div>
<div class="slides slide5"></div>
</div>
<div class="controls">
<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>
<label for="slide4"></label>
<label for="slide5"></label>
</div>
</div>
Здесь мы видим, что общий блок «wrapper» содержит в себе блок «slider» с 5-ю слайдами, внутри которых можно поместить любой html-код, который будет располагаться на слайде. Перед общим блоком находятся радио-кнопки, которые впоследствии будут скрыты, чтобы создать для них собственную панель навигации по слайдам, с которой нам помогут лейблы в блоке «controls».
2. Оформляем слайдер
Здесь мы остановимся и немного рассмотрим css. Обратите внимание, что для некоторых свойств проставлены кроссбраузерные префиксы, чтобы все современные браузеры могли их понимать.
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
body {
background-image: url(https://habrastorage.org/files/996/d76/d04/996d76d0410d422fa54cc433ce7ead2a.png);
}
С оформлением фона и общими стилями всё понятно.
.wrapper {
height: 350px;
margin: 100px auto 0;
position: relative;
width: 700px;
}
.slider {
background-color: #ddd;
height: inherit;
overflow: hidden;
position: relative;
width: inherit;
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .5);
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .5);
-o-box-shadow: 0 0 20px rgba(0, 0, 0, .5);
box-shadow: 0 0 20px rgba(0, 0, 0, .5);
}
Общий блок и блок с слайдером имеют одинаковые размеры, чтобы идеально контролировать положение слайдера на странице. Пока отсутствуют слайды, слайдер мы временно покрасили в светло-серый цвет.
.wrapper > input {
display: none;
}
Радио-кнопки скрываем. Они нам понадобятся позже.
Результат на данный момент такой:
3. Оформляем слайды
Здесь мы пропишем общие стили для слайдов и каждый слайд отдельно:
.slides {
height: inherit;
position: absolute;
width: inherit;
}
.slide1 { background-image: url(https://habrastorage.org/files/3f2/628/bd5/3f2628bd58c8452db516195cb0c9bfc9.jpg); }
.slide2 { background-image: url(https://habrastorage.org/files/3e1/95d/c7f/3e195dc7f5a64469807f49a14f97ba0e.jpg); }
.slide3 { background-image: url(https://habrastorage.org/files/663/6b1/d4f/6636b1d4f8e643d29eab8c192fc1cea3.jpg); }
.slide4 { background-image: url(https://habrastorage.org/files/e59/424/c04/e59424c046be4dab897d84ab015c87ea.jpg); }
.slide5 { background-image: url(https://habrastorage.org/files/53c/ff6/c1c/53cff6c1caf842368c70b8ef892d8402.jpg); }
Для всех слайдов мы указали абсолютное позиционирование, чтобы можно было играть с эффектами появления. Размеры слайдов берутся из размера самого слайдера, чтобы не приходилось их прописывать в нескольки местах.
4. Делаем навигацию по слайдам
Так как радио-кнопки скрыты и нужны нам как переключатели, оформляем подготовленные лейблы:
.wrapper .controls {
left: 50%;
margin-left: -98px;
position: absolute;
}
.wrapper label {
cursor: pointer;
display: inline-block;
height: 8px;
margin: 25px 12px 0 16px;
position: relative;
width: 8px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
.wrapper label:after {
border: 2px solid #ddd;
content: " ";
display: block;
height: 12px;
left: -4px;
position: absolute;
top: -4px;
width: 12px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
Навигацию мы делаем классической. Каждая кнопка представляет собой область в виде круга, внутри которого при активном слайде пустая область частично окрасится. Пока же у нас следующий результат:
5. Учим кнопки нажиматься
Пришло время научить слайдер переключать слайды по нажатию на определённую кнопку:
.wrapper label {
cursor: pointer;
display: inline-block;
height: 8px;
margin: 25px 12px 0 16px;
position: relative;
width: 8px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
-webkit-transition: background ease-in-out .5s;
-moz-transition: background ease-in-out .5s;
-o-transition: background ease-in-out .5s;
transition: background ease-in-out .5s;
}
.wrapper label:hover,
#slide1:checked ~ .controls label:nth-of-type(1),
#slide2:checked ~ .controls label:nth-of-type(2),
#slide3:checked ~ .controls label:nth-of-type(3),
#slide4:checked ~ .controls label:nth-of-type(4),
#slide5:checked ~ .controls label:nth-of-type(5) {
background: #ddd;
}
В оформленные кнопки навигации добавляем плавное окрашивание внутри них. Также добавляем условия, при которых активная кнопка и кнопка, на которую навели курсор, будет плавно окрашиваться. Наши собственные радио-кнопки готовы:
6. Оживляем слайдер
Ну, а теперь делаем так, чтобы слайды наконец-то переключались:
.slides {
height: inherit;
opacity: 0;
position: absolute;
width: inherit;
z-index: 0;
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
-webkit-transition: transform ease-in-out .5s, opacity ease-in-out .5s;
-moz-transition: transform ease-in-out .5s, opacity ease-in-out .5s;
-o-transition: transform ease-in-out .5s, opacity ease-in-out .5s;
transition: transform ease-in-out .5s, opacity ease-in-out .5s;
}
#slide1:checked ~ .slider > .slide1,
#slide2:checked ~ .slider > .slide2,
#slide3:checked ~ .slider > .slide3,
#slide4:checked ~ .slider > .slide4,
#slide5:checked ~ .slider > .slide5 {
opacity: 1;
z-index: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
В общие стили слайдов мы добавляем свойства, при которых все слайды становятся невидимыми и уходят на задний план. Также мы добавили небольшое увеличение слайдов, пока они невидимы для придания интересного появления в слайдере.
Далее мы приписываем условие, при котором, в зависимости от активной кнопки навигации, в окне слайдера появлялся необходимый слайд.
Результат можно посмотреть здесь: демка слайдера.
Итог
Слайдер не требует js. Пускай он не умеет сам переключаться, но любому, кто знает основы CSS, transition и transform, будет легко придумать свои эффекты для переключения слайдов.
P.S. За основу взят слайдер от «Sorax», который я переделал на свой лад.
Автор: Reizortm
