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

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

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

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

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

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

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

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

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

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

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

  2. Neoptolem говорит:

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

  3. Neoptolem говорит:

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

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

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