Как создать красивый слайдер для сайта без плагинов?

Здравствуйте, коллеги! Слайдер для сайта — вещь не жизненно важная для блога, но порой он способен придать некоторый шарм дизайну. Иногда приходится пройти целые квесты, установить и настроить плагин, подключить скрипты и т.п. и т.д. и др. Для человека, не шарящего во всех этих премудростях, это будет мучением.  Но я нашел очень простое решение. Сейчас вы узнаете, как просто с помощью CSS3 сделать красивый слайдер для своего сайта.

Слайдер, который мы сейчас будем с вами делать, имеет в своем арсенале затухающий эффект, который смотрится очень даже симпатично.

Что ж, давайте начнем творить. Самые любопытные могут посмотреть демо:

Просмотреть демоСкачать исходники

Шаг #1 — HTML. На первом этапе нужно разобраться с HTML-разметкой будущего слайдера, которая основана на маркированном списке (тег <ul>). Ниже вы увидите код, который реализован в демо-варианте:

[php]
<div class="slides">
<ul>
<li><img title="Заголовок для изображения #1" src="images/pic1.jpg" alt="" />
<div>Текст для слайдера #1</div></li>
<li><img title="Заголовок для изображения #2" src="images/pic2.jpg" alt="" />
<div>Текст для слайдера #2</div></li>
<li><img title="Заголовок для изображения #3" src="images/pic3.jpg" alt="" />
<div>Текст для слайдера #3<</div></li>
<li><img title="Заголовок для изображения #4" src="images/pic4.jpg" alt="" />
<div>Текст для слайдера #4</div></li>
</ul>
</div>
[/php]

Здесь, как вы видите, всего 4 слайда. Каждый слайд состоит из картинки и описания к ней. К каждой картинке можно добавить заголовок с помощью атрибута title и альтернативное текстовое описание с помощью атрибута alt. В случае надобности можно добавить необходимое количество слайдов, дописав соответствующий код:

[php]
<ul>
<li><img title="Заголовок для изображения #1" src="images/pic1.jpg" alt="" />
<div>Текст для слайдера #1</div></li>
</ul>
[/php]

P.S. Если вы испытываете трудности с пониманием HTML, то советую изучить бесплатный курс по HTML Евгения Попова.

Здесь стоит упомянуть на пути к картинкам. Если вы оставите такой путь src="images/pic1.jpg", то картинку браузер будет искать в папке, лежащей на уровень выше а не в папке «images» вашего сайта (которая располагается в корне вашего сайта). Поэтому, если вы хотите вставить слайдер в шаблон блога, то нужно будет прописать полный путь, начиная с http://. Например,

[php]
<ul>
<li><img title="Заголовок для изображения #1" src="http://business-vzakone.ru/images/pic1.jpg" alt="" />
<div>Текст для слайдера #1</div></li>
</ul>
[/php]

Шаг #2 — CSS. После того как вы разобрались со структурой будущего слайдера для сайта нужно его «приодеть», то есть придать стилей оформления. Ниже представлены стили, оформляющие демо-вариант слайдера и которые вы сможете переделать под свои нужды (если вы испытываете трудности с CSS, то советую изучить бесплатный курс по CSS Евгения Попова):

[php]/* fade slider */
.slides {
height:300px;
margin:50px auto;
overflow:hidden;
position:relative;
width:900px;
}
.slides ul {
list-style:none;
position:relative;
}

/* keyframes #anim_slides */
@-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;

/* css3 animation */
-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;
}

/* css3 delays */
.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;
}

/* keyframes #anim_titles */
@-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;
border-radius:10px 10px 10px 10px;
box-shadow:0 0 5px #FFFFFF inset;
color:#FFFFFF;
font-size:26px;
left:10%;
margin:0 auto;
padding:20px;
position:absolute;
top:50%;
width:200px;

/* css3 animation */
-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;
}
[/php]

Вот и все. Слайдер для сайта готов. Надеюсь, он вам понравился. Пока-пока =)

Источник статьи: http://www.script-tutorials.com/css3-fade-slider/

Видео по теме: Интервью с Дмитрием Акининым (HTML5 и CSS3) от пользователя biztehno

[youtube]PHQBLUiwIXc[/youtube]