Мой Справочник | CSS3 | Слайдер nёrds
Слайдеры jQuery
HTML-код
<div class="slider">
<!--1. Создаём радио-кнопки, которые будут выполнять функцию переключения слайдов, в последствие их спрячем, так как эту функцию возьмут на себя лейблы, name должен быть ОДИНАКОВЫМ у каждого инпута!!!-->
<input type="radio" name="slider" id="slide1" checked>
<input type="radio" name="slider" id="slide2">
<input type="radio" name="slider" id="slide3">
<!--2. Создаём контейнер для переключения слайдов из лейблов, связываем лейблы с радио-кнопками через id, теперь лейблы будут себя вести как радио-кнопки и их можно застилизовать как угодно-->
<div class="slider-controls">
<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>
</div>
<!--3. Верстаем слайды-->
<div class="slide1 clearfix">
<div class="left-column clearfix">
<h2 class="slider-title">Долго, дорого,<br>
скрупулезно.</h2>
<p class="slider-text">Математически выверенный дизайн<br>
для вашего сайта или мобильного приложения.</p>
<a class="slider-button" href="#">УЗНАТЬ БОЛЬШЕ</a>
</div>
<div class="right-column clearfix">
<picture>
<img src="img/slide1.png" alt="slide1" width="338" height="231">
</picture>
</div>
</div>
<div class="slide2 clearfix">
...
</div>
<div class="slide3 clearfix">
...
</div>
</div>
CSS-код
...
/*4. Прячем все слайды*/
.slide1, .slide2, .slide3 {
display: none;
}
/*5. Переключатель из лейблов позиционируем куда нужно*/
.slider-controls {
position: absolute;
bottom: 50px;
left: 50%;
margin-left: -75px;
width: 150px;
text-align: center;
}
/*6. Прячем формы*/
input[type="radio"] {
display: none;
}
/*7. Стилизуем переключатели*/
.slider-controls label {
display: inline-block;
height: 6px;
width: 6px;
background-color: #fff;
border: 4px solid #fff;
border-radius: 50%;
margin-right: 5px;
cursor: pointer;
}
/*8. Выделяем лейбл при состоянии checked*/
#slide1:checked ~ .slider-controls label[for="slide1"],
#slide2:checked ~ .slider-controls label[for="slide2"],
#slide3:checked ~ .slider-controls label[for="slide3"] {
background-color: #000;
}
/*9. Самый важный пункт! Связываем РАДИО-КНОПКИ со СЛАЙДАМИ*/
#slide1:checked ~ .slide1 {display: block;}
#slide2:checked ~ .slide2 {display: block;}
#slide3:checked ~ .slide3 {display: block;}
/* 10. Задаём по ум* checked слайду №1 ~ */
