Урок – 6 – Самый простой слайдер

Тут все очень просто, нужно просто добавить UL-список в самое начало сразу после тега body.

<ul class="body_slides">
<li></li>
<li></li>
<li></li>
</ul>

В списке всего три строки li, то есть слайдер рассчитан на 3 изображения, если нужно больше, то первым шагом будет добавление еще нужного количества строк. Двигаемся дальше.
CSS стили
Тут наверное самая основная часть работы, так как от CSS, зависит то как будет работать наш слайдер. Открываем файл style.css вашего сайта и добавляем в него следующий код.

.body_slides {
	list-style:none;
	margin:0;
	padding:0;
	z-index:-2; 
	background:#000;
}
.body_slides,
.body_slides:after {
        position: fixed;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
}
.body_slides:after { 
        content: ' ';
	background: transparent url(images/pattern.png) repeat top left;
}
@-webkit-keyframes anim_slides {
        0% {opacity:0;}
        6% {opacity:1;}
        24% {opacity:1;}
        30% {opacity:0;}
        100% {opacity:0;}
}
.body_slides li {
        width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
        background-size:cover;
        background-repeat:none;
	opacity:0;
        -webkit-animation: anim_slides 18s linear infinite 0s;
}
 
.body_slides li:nth-child(1) {
        background-image: url(images/1.jpg) 
}
.body_slides li:nth-child(2) {
        -webkit-animation-delay: 6.0s;
        background-image: url(images/2.jpg) 
}
.body_slides li:nth-child(3) {
        -webkit-animation-delay: 12.0s;
        background-image: url(images/3.jpg) 
}

Наш список со слайдами имеет класс body_slides. Ему заданы стили, для внешнего вида и общих настроек.
Далее у нас идет псевдоэлемент – :after, который задает дополнительный слой и поверх фона наложен узор в виде точек. Делается это с помощью изображение, к которому указан путь images/pattern.png. Если у Вас другой путь, то укажите его правильно.
.body_slides li:nth-child(1) – это первый по порядку слайд и ему задан фоновый рисунок. Далее идет nth-child(2), ему кроме рисунка задано еще время и равно 6 сек. То есть, он появится через 6 секунд после первого слайда. Далее nth-child(3), он появится еще через шесть секунд, поэтому у него время 12 сек. Если нужно добавить 4 слайд, то добавляем nth-child(4) и у него должно быть время уже 18 секунд.
Далее нужно указать полное время анимации, оно сейчас задано в body_slides li и равно 18 сек. Если добавите 4 слайд то будет равно 24 и так далее. Если с математикой дружите, должны справится, главное не ошибиться ибо слайдер ровно не заработает. По желанию можно ускорить или замедлить, прописав нужное время.
keyframes anim_slides – это появление и исчезновении слайда. Изначально слайд прозрачный и ему задано условие – opacity:0;. Когда приходит очередь любого из слайдов, он сначала появляется, а потом начинает вновь становится прозрачным и полностью исчезает, а на его месте появляется новый. Если хотите изменить скорость появления или исчезновения, меняйте проценты – это процент от общего времени.
Правило @-webkit-keyframes — позволяет пользователю описать анимацию CSS свойств в виде перечня ключевых кадров.
z-index – Любые позиционированные элементы на веб-странице могут накладываться друг на друга в определенном порядке, имитируя тем самым третье измерение, перпендикулярное экрану. Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет z-index. Это свойство работает только для элементов, у которых значение position задано как absolute, fixed или relative.

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