Главная
Web-дизайн
Простой слайдер с помощью СSS

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

CSS слайдер

Доброго времени суток. 🙂

Иногда на своем сайте нужно установить слайдер. Он может быть нужен для показа каких то баннеров или просто картинок. Слайдер может нести информационный характер или рекламный, все зависит от Ваших потребностей. Существует очень много способов сделать слайдер на сайте. Я хочу показать один из таких способов.

У этого слайдера есть несколько плюсов. Первый из них заключается в том, что это слайдер организован с помощью С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. Думаю, это понятно.

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

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




Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(5 голосов, в среднем: 5 из 5)

Опубликован 1 комментарий

  • Алексей
    Комментариев: 1

    Добрый, как сделать, чтобы была одна картинка а тексты ездили как в данном примере?

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

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

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий