Слайдер CSS

173
166
153
129
135
116
122
172

Здравствуйте уважаемые начинающие веб-мастера.

Вот самый простой в мире слайдер на чистом CSS.

К преимуществам такого слайдера можно отнести лёгкость и безопасность, а так же то, что его сможет сделать и установить на свой сайт даже самый начинающий веб-мастер.

А недостаток в том, что только на CSS невозможно сделать повтор цикла.

Но если учесть, что восемь картинок прокручиваются более 30 секунд, то этого времени вполне достаточно посетителю для просмотра страницы.

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

Эффекты появления картинок можно изменить по своему вкусу, и в соответствии с возможностями CSS3. Давайте смотреть где и как это можно сделать.

Код:

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>Слайдер CSS</title>
<style>
/* Блок слайдера */
#slaid {
	/* Задаём относительное позиционирование */
	position: relative;
	/*Размер и рамка блока*/
	width: 400px;
	height: 200px;
	border: 2px solid #333;
	border-radius: 5px;
}
/* Групповой селектор для 7-ми картинок */
.image1,
.image2,
.image3,
.image4,
.image5,
.image6,
.image7 {
/* Позиционируем абсолютно относительно блока */
	position: absolute;
/* Делаем их полностью прозрачными */
	opacity: 0;
	width: 400px;
	height: 200px;
}
/* Подключаем анимацию к первой картинке */
.image1{
	animation: one-image 8s 1s ease alternate;
}
/* Анимация последующих картинок выполняется с задержкой начала
необходимой для прокрутки предыдущих изображений */ .image2 { animation: two-image 8s 5s ease alternate; } .image3 { animation: three-image 8s 10s ease alternate; } .image4 { animation: four-image 8s 14s ease alternate; } .image5 { animation: five-image 8s 18s ease alternate; } .image6 { animation: six-image 8s 22s ease alternate; } .image7 { animation: seven-image 8s 26s ease alternate; } /* Последняя картинка не прозрачная остаётся видной после прокрутки */ .image8 { position: absolute; width: 400px; height: 200px; animation: eight-image 34s ease alternate; } /* Анимации для первой картинки */ @keyframes one-image{ /* Задаём изменение прозрачности.
Здесь можно добавить вращение, перемещение из-за границ блока
или появление из центра (масштабирование) */ 0% { opacity: 1; } 50% { opacity: 1; } 100% { opacity: 0; } } /* Анимация для следующих 6-и картинок */ @keyframes two-image{ 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @keyframes three-image{ 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @keyframes four-image{ 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @keyframes five-image{ 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @keyframes six-image{ 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @keyframes seven-image{ 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } /* Анимация для восьмой картинки */ @keyframes eight-image{ /* остаётся прозрачной пока не прокрутятся предыдущие */ 0% { opacity: 0; } 87% { opacity: 0; } /*Становиться видимой в конце работы слайдера */ 100% { opacity: 1; } } </style> </head> <body> <div id="slaid"> <img class="image1" src="images/172.jpg"> <img class="image2" src="images/166.jpg"> <img class="image3" src="images/153.jpg"> <img class="image4" src="images/129.jpg"> <img class="image5" src="images/135.jpg"> <img class="image6" src="images/116.jpg"> <img class="image7" src="images/122.jpg"> <img class="image8" src="images/173.jpg"> </div> </body> </html>

Если вставите этот код в редактор, пожалуйста удалите комментарии, так как для удобства чтения в них присутствует тег <br>, хотя его и не видно, который может повредить работе стилей.

И на всякий случай — чтобы появилась возможность прокрутить слайдер ещё раз можно добавить следующий код:

<script>  
var CLN; onload = function () {CLN = document.getElementById ('slaid').cloneNode (3)}
</script>

<input type="button" value="Посмотреть ещё раз" onclick="var obj = document.getElementById ('slaid'); obj.parentNode.replaceChild (CLN, obj)">

При этом под слайдером появится кнопка которую можно назвать как Вам угодно и оформить в CSS.

P.S. Если постараться и подогнать интервалы показа картинок в @keyframes, то карусель можно сделать непрерывной.

У меня получилось. Можно посмотреть вот здесь. Текст в баннерах прокручивается свойствами анимации без скрипта.

Желаю творческих успехов.

Запись опубликована в рубрике CSS основы. Добавьте в закладки постоянную ссылку.

3 комментария на «Слайдер CSS»

  1. stariс говорит:

    С непрерывностью только с помощью css тяжеловато. Мне удалось сделать непрерывность только для трёх элементов. Пример — баннер хостинга Бегет вверху страницы. В нём смена текста настроена только интервалами начала и продолжительности анимации.

    Карусель с большим количеством картинок лучше делать на JavaScript. Вот тут у меня есть простенький код карусели.

    А кнопка должна работать. Может какой-то символ упустили?

  2. Neoptolem говорит:

    Получилось, спасибо!
    НЕ удается с настройками @keyframes, для непрерывности.
    Подскажите, плиз, начинающему)

  3. Neoptolem говорит:

    Получилось, спс!!
    А, вот, кнопка «прокрутить еще раз» не работает.
    Помогите начинающему)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *