Простой слайдер с помощью СSS

У этого слайдера есть несколько плюсов. Первый из них заключается в том, что это слайдер организован с помощью СSS без использования jQuery. Он очень простенький и легко устанавливается. Количество слайдов, можно добавлять сколько нужно. В этом слайдере нет кнопок управления - Вперед/Назад, но я считаю, что это не большой недостаток.

В примере видно, что слайдер представляет из себя меняющиеся картинки и блоки с сопровождающим текстом. Чтобы подключить у себя слайдер, сначала добавьте html-разметку

<div class="slides">
    <ul>
        <li><img src="img1.jpg" title="Заголовок для изображения #1" alt="" />
        <div>Текст для слайдера #1</div>
        </li>
        <li><img src="img2.jpg" title="Заголовок для изображения #2" alt="" />
        <div>Текст для слайдера #2</div>
        </li>
        <li><img src="img3.jpg" title="Заголовок для изображения #3" alt="" />
        <div>Текст для слайдера #3</div>
        </li>
        <li><img src="img4.jpg" title="Заголовок для изображения #4" alt="" />
        <div>Текст для слайдера #4</div>
        </li>
         </ul>
</div>

Изображения подключаются через img, так что укажите правильный путь к ним.

Слайды подключаются в виде ul-списка, так что для того, чтобы добавить новый слайд просто добавьте следующий по-порядку - li с подключением нового изображения и текстового описания. Потом еще нужно будет добавить и в стилях.

<li><img src="img5.jpg" title="Заголовок для изображения #5" alt="" />
    <div>Текст для слайдера #5</div>
</li>

Теперь, чтобы осуществить анимацию, Вам нужно добавить CSS стили и анимацию.

/*Слайдер*/
.slides {
height:150px;
margin:50px auto;
overflow:hidden;
position:relative;
width:400px;
}
.slides ul {
list-style:none;
position:relative;
}
 
@-webkit-keyframes anim_slides {
0% {
opacity:0;
}
6% {
opacity:1;
}
24% {
opacity:1;
}
30% {
opacity:0;
}
100% {
opacity:0;
}
}
@-moz-keyframes anim_slides {
0% {
opacity:0;
}
6% {
opacity:1;
}
24% {
opacity:1;
}
30% {
opacity:0;
}
100% {
opacity:0;
}
}
 
.slides ul li {
opacity:0;
position:absolute;
top:0;
 

-webkit-animation-name: anim_slides;
-webkit-animation-duration: 24.0s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
 
-moz-animation-name: anim_slides;
-moz-animation-duration: 24.0s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
}
 

.slides ul li:nth-child(2), .slides ul li:nth-child(2) div {
-webkit-animation-delay: 6.0s;
-moz-animation-delay: 6.0s;
}
.slides ul li:nth-child(3), .slides ul li:nth-child(3) div {
-webkit-animation-delay: 12.0s;
-moz-animation-delay: 12.0s;
}
.slides ul li:nth-child(4), .slides ul li:nth-child(4) div {
-webkit-animation-delay: 18.0s;
-moz-animation-delay: 18.0s;
}
.slides ul li img {
display:block;
}
 
@-webkit-keyframes anim_titles {
0% {
left:100%;
opacity:0;
}
5% {
left:10%;
opacity:1;
}
20% {
left:10%;
opacity:1;
}
25% {
left:100%;
opacity:0;
}
100% {
left:100%;
opacity:0;
}
}
@-moz-keyframes anim_titles {
0% {
left:100%;
opacity:0;
}
5% {
left:10%;
opacity:1;
}
20% {
left:10%;
opacity:1;
}
25% {
left:100%;
opacity:0;
}
100% {
left:100%;
opacity:0;
}
}
 
.slides ul li div {
background-color:#000000;
color:#FFFFFF;
font-size:14px;
left:10%;
padding:10px;
position:absolute;
top:25%;
width:100px;
 
-webkit-animation-name: anim_titles;
-webkit-animation-duration: 24.0s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
 
-moz-animation-name: anim_titles;
-moz-animation-duration: 24.0s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
}

Самый первый класс - .slides - это класс, с помощью которого можете настроить размер слайдера и его позиционирование. Сейчас размер 150 на 400 пикселей. Просто измените на нужній и под него создайте изображения.

.slides ul li div - это блок с текстом, который тоже можно корректировать под себя.

Также в стилях вы найдете значение - 24.0s. Это общее время анимации. Присутствуют стили для каждого li-элемента, как например для второго по счету - .slides ul li:nth-child(2), .slides ul li:nth-child(2) div {. Еще есть под номером 3 и 4. Чтобы добавить под номером 5, дублируйте например четвертый и измените 4 на 5. Также установите время начала анимации.

Для каждого li-элемента задано свое время анимации. У первого по умолчанию 0, тут настройки не нужны, а вот у каждого последующего на 6 секунд больше. Поэтому у второго 6 секунд, третьего - 12, а у четвертого - 18 и длится до 24, как и писал раньше потом все сначала. Так что, если добавите 5 слайд то нужно указать ему время 24 а общее изменить на 30 секунд. Если шестой слайд, то по том же пути.

Для 5 слайда стили будут такими:

.slides ul li:nth-child(5), .slides ul li:nth-child(5) div {
-webkit-animation-delay: 24.0s;
-moz-animation-delay: 24.0s;
}

Также, Вы можете изменить время анимации, только правильно посчитайте. Например, если Вам надо не 6, а 4 секунды задержки, то время общей анимации для 4 слайдов будет не 24 секунды, а 16. Получается для второго слайда - 4, для третьего 8, а для четвертого - 12. Думаю, это понятно.

Установив и настроив правильно свой слайдер, получите отличный результат.

На этом все, спасибо за внимание. 🙂