Слайдер для сайта с выделением активного элемента и появляющимся при наведении описанием

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

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

demoСкачать

Слайдер для сайта html каркас.

<section id="dg-container" class="dg-container">
<div class="dg-wrapper">
<a href="#"><img src="images/1.jpg" alt="image01">
<div> <span class="name-dok">Цветок</br>Синий<span>
<p class="dol">1 картинка</p>
</div>
<div class="block-caption">
<strong>Цвет - синий</strong></br>
Фон - однотонный</br>
Красивый =)</br>
</div>
</a>
<a href="#"><img src="images/1.jpg" alt="image01">
<div> <span class="name-dok">Цветок</br>Синий<span>
<p class="dol">1 картинка</p>
</div>
<div class="block-caption">
<strong>Цвет - синий</strong></br>
Фон - однотонный</br>
Красивый =)</br>
</div>
</a>
</div>
<nav>
<span class="dg-prev"><</span>
<span class="dg-next">></span>
</nav>
</section>

Пока все просто.

  • section — это тело нашего слайдера
  • nav — это стрелочки навигации для перелистования
  • div class="dg-wrapper" — это блок со слайдами
  • тег <а>и все, что в нем находится — это слайд. В примере их два, чтобы их стало несколько, достаточно скопировать этот отрезок кода несколько раз. Вставлять нужно после закрывающего тега 
  • span class="name-dok" — это название слайда, оно выводится под картинкой
  • div class="block-caption" — а вот это описание будет появляться при наведении мышки на слайд

html разметка готова, теперь нужно добавить стилей.

Слайдер для сайта css оформление.

Все стили можно подключить в отдельном файле или скопировать в основной файл стилей вашего сайта.

.dg-container{
width: 100%;
height: 450px;
position: relative;
}
.dg-wrapper{
width: 481px;
height: 316px;
margin: 0 auto;
position: relative;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-o-perspective: 1000px;
-ms-perspective: 1000px;
perspective: 1000px;
}
.dg-wrapper a{
width: 300px;
height: 300px;
display: block;
position: absolute;
left: 0;
top: 0;

}
.dg-wrapper a.dg-transition{
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.dg-wrapper a img{
display: block;
padding: 0px;
}
.dg-wrapper a:hover .block-caption {opacity: 1;}
.dg-wrapper a .block-caption {
background: rgba(48,156,208,0.8);
bottom: 0;
color: #fff;
display: table;
left: 0;
opacity: 0;
padding: 10px 0;
position: absolute;
width: 300px;
height:215px;
text-align: center;
padding-top:75px;
font-size:18px;
line-height: 1;
}
.dg-wrapper a div{
font-style: italic;
text-align: center;
line-height: 50px;
text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
color: #333;
font-size: 16px;
width: 100%;
display: none;
position: absolute;
}
.dg-wrapper a.dg-center div{
display: block;
line-height: 1;
}
.dg-container nav{

width: 900px;
position: absolute;
z-index: 1000;
bottom: 290px;
left: 10%;
margin-left: -29px;
}
.dg-container nav span{
text-indent: -9000px;
float: left;
cursor:pointer;
width: 24px;
height: 25px;
opacity: 0.8;
background: transparent url(../images/arrows.png) no-repeat top left;
}
.dg-container nav span:hover{
opacity: 1;
}
.dg-container nav span.dg-next{
background-position: top right;
margin-left: 950px;
margin-top: -30px;
}
.name-dok {
font-size: 18px;
color: #038ed6;
font-weight: bold;}
.dol { color:#000; font-size:14px; padding-top:15px;}

Подключение скриптов слайдера. Делаем так чтобы все работало как нужно.

После кода слайдера нужно добавить следующие строки

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/modernizr.custom.53451.js"></script>
<script type="text/javascript" src="js/jquery.gallery.js">
</script><script type="text/javascript">// <![CDATA[
$(function() {
$('#dg-container').gallery();
});
// ]]></script>

  • Первая строка — это библиотека jquery. Если она была подключена раньше, то ее не нужно добавлять повторно.
  • Вторая строка — это очень полезная библиотека js, без нее слайдер может отказаться работать в старых браузерах
  • Третья строка — это скрипт самого слайдера
  • Последний скрипт — это функция, которая запускает работу нашего слайдера.

На этом все. Слайдер — карусель с эффектом выделения активного слайда и описанием при наведении мышки готов.

Поделиться в социальных сетях:

Еще по теме

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

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