Небольшой красивый слайдер на CSS3.

Привет всем! С вами на связи Елена.

Вот сегодня решила записать для вас урок о том, как поставить небольшой красивый слайдер на свой сайт.

Идею подсмотрела на одном из зарубежных сайтов - в видео показываю, на каком.

Вся прелесть данного слайдера в том, что он идет только на css3.

То есть там не используются яваскрипты, соответственно, их не нужно подключать, соответственно, меньше мороки со слайдером - нервы спокойнее И в то же время сам слайдер на мой взгляд очень даже симпатичный.

Здесь вы можете посмотреть демо слайдера:

Посмотреть ДЕМО!

Просто, но со вкусом

В общем, смотрите урок:

Скачать архив с заготовками для слайдера

Конечно же, вместо тех картинок, которые использую я, вы можете использовать свои, тем самым приспособив слайдер под тематику вашего сайта. Размеры картинок: 320х200 пикселей.

С размерами картинок и количеством слайдов, конечно, тоже можно поэкспериментировать, но это больше для тех, кто разбирается в css и html.

Если вы новичок, то экспериментировать не советую, лучше делайте так, как я .

На всякий случай привожу здесь html код слайдера в двух вариантах -

для простого слайдера:

<div class="slideOuter">
    <ul class="slide">
       <li><a id="p1" href="#" title="Одуванчик" rel="nofollow" target="_blank"><img src="image/sl1.jpg"></a></li>
           <li><a id="p2" href="#" title="Весенний цвет" rel="nofollow" target="_blank"><img src="image/sl2.jpg"></a></li>
           <li><a id="p3" href="#" title="Роза в снегу" rel="nofollow" target="_blank"><img src="image/sl3.jpg"></a></li>
           <li><a id="p4" href="#" title="Утренняя роса" rel="nofollow" target="_blank"><img src="image/sl4.jpg"></a></li>
           <li><a id="p5" href="#" title="Загадочное озеро" rel="nofollow" target="_blank"><img src="image/sl5.jpg"></a></li>
           <li><a id="p6" href="#" title="Пальмовые листья" rel="nofollow" target="_blank"><img src="image/sl6.jpg"></a></li>
           <li><a id="p7" href="#" title="Золотая осень" rel="nofollow" target="_blank"><img src="image/sl7.jpg"></a></li>
        </ul>
</div>

для слайдера, где выделяется текущая картинка:

<div class="slideOuter">
    <ul class="slide current">
       <li><a id="p1" href="#" title="Одуванчик" rel="nofollow" target="_blank"><img src="image/sl1.jpg"></a></li>
           <li><a id="p2" href="#" title="Весенний цвет" rel="nofollow" target="_blank"><img src="image/sl2.jpg"></a></li>
           <li><a id="p3" class="current" href="#" title="Роза в снегу" rel="nofollow" target="_blank"><img src="image/sl3.jpg"></a></li>
           <li><a id="p4" href="#" title="Утренняя роса" rel="nofollow" target="_blank"><img src="image/sl4.jpg"></a></li>
           <li><a id="p5" href="#" title="Загадочное озеро" rel="nofollow" target="_blank"><img src="image/sl5.jpg"></a></li>
           <li><a id="p6" href="#" title="Пальмовые листья" rel="nofollow" target="_blank"><img src="image/sl6.jpg"></a></li>
           <li><a id="p7" href="#" title="Золотая осень" rel="nofollow" target="_blank"><img src="image/sl7.jpg"></a></li>
        </ul>
</div>

А также код стилей:

ul.slide li{list-style: none; color: #178bbc;}
.slideOuter {width:660px; height:200px; overflow:hidden; margin:0 auto;}
.slideOuter .slide {padding:0; margin:0; list-style:none; width:980px; height:200px; overflow:hidden;}
.slideOuter .slide li {float:left;}
.slideOuter .slide li a {display:block; float:left; width:92px; border-right:2px solid #fff; height:200px; overflow:hidden;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.slideOuter .slide.current a {width:54px;}
.slideOuter .slide.current li a.current {width:318px;}
.slideOuter .slide li a img {border:0;}
.slideOuter .slide:hover a#p1,
.slideOuter .slide:hover a#p2,
.slideOuter .slide:hover a#p3,
.slideOuter .slide:hover a#p4,
.slideOuter .slide:hover a#p5,
.slideOuter .slide:hover a#p6{width:54px;}
.slideOuter .slide a#p7 {width:318px;}
.slideOuter .slide a#p1:hover,
.slideOuter .slide a#p2:hover,
.slideOuter .slide a#p3:hover,
.slideOuter .slide a#p4:hover,
.slideOuter .slide a#p5:hover,
.slideOuter .slide a#p6:hover {width:318px;}

Если будут вопросы, задавайте их в комментариях.

Буду рада помочь вам!

С уважением, Елена Лощилова