Слайдер CSS

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

Вот самый простой в мире слайдер на чистом 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, то карусель можно сделать непрерывной.

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

Правда получилось сделать только с тремя картинками.

P.P.S. Теперь подобные баннеры и на этом сайте под шапкой сайта.

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

А ну-ка, что там ещё интересного

Слайдер на javascript
Анимация CSS для начинающих
CSS перемещение, вращение, 3D
Плавающий блок CSS
Часы CSS
Вращающийся куб баннер CSS
Живое сердце CSS
Текст появляющийся на изображениях CSS
Блок перевёртыш CSS
Анимация для шапки сайта CSS
Логотип для сайта
В раздел

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

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

stariс говорит:

2016-06-18 в 21:33

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

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

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

2016-06-14 в 01:23

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

2016-06-14 в 01:04

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

Слайдер CSS

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

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