Хотите создать слайдер с миниатюрами изображений для Вашего сайта, да так чтобы они корректно отображались в браузерах и были адаптированы под изменения размеров окна обозревателя, тогда этот урок Вас должен заинтересовать. Для этого мы будем использовать Elastislide - плагин jQuery для адаптивной карусели, которая изменяет размер и алгоритм работы в соответствии с размером экрана. Если вставить карусель в контейнер с изменяющейся шириной, то и она будет изменять ширину.
Данное решение достаточно простое. Но в некоторых случаях (например, если размер изображений большой) нужно также изменять размер слайда. Плагин Elastislide имеет такую опцию, наряду с другими.
Для начала нужно создать HTML-разметку. Разметка карусели состоит из основного контейнера, который выравнивает ширину плавающего контейнера, помещаемого внутрь него.
<div id="carousel">
<div>
<ul>
<li>
<a href="#">
<img src="images/medium/1.jpg" alt="image01" />
</a>
</li>
<li>...</li>
</ul>
</div>
</div>
Используйте атрибут ID и запускайте плагин:
$('#carousel').elastislide({
imageW : 180
});
где imageW - ширина миниатюр.
Теперь создаем стили CSS для слайдера:
.more{
position:relative;
clear:both;
}
.more p{
color:#8f0630;
font-size:16px;
}
.more ul{
display:block;
text-align:center;
}
.more ul li{
display:inline;
padding:2px;
line-height:30px;
}
.more ul li.selected a,
.more ul li.selected a:hover{
background:#690322;
color:#fff;
text-shadow:none;
}
.more ul li a{
text-shadow:1px 1px 1px #fff;
color:#333;
background:#fff;
padding:3px 6px;
white-space:nowrap;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.more ul li a:hover{
background:#8f0630;
color:#fff;
text-shadow:none;
}
.column{
width:48%;
float:left;
padding:1%;
}
@media screen and (max-width: 640px) {
.header{
text-align:center;
}
.header a{
font-size:10px;
text-shadow:none;
white-space:nowrap;
}
.header span.right_ab{
float:none;
}
h1{
font-size:40px;
}
h1 span{
font-size:16px;
}
}
Рассмотрим некоторые опции плагина Elastislide:
speed : 450,
// скорость анимации
easing : '',
// эффект перехода
imageW : 190,
// ширина изображений
margin : 3,
// поле для изображений справа
border : 2,
// рамка изображений
minItems : 1,
// минимальное количество слайдов, которое нужно выводить.
// При изменении размера окна будет выводиться слайдов не менее
// количества, заданного в парметре minItems
// (если значение minItems меньше, чем общее количество слайдов)
current : 0,
// номер текущего слайда.
// При изменение окна плагин всегда будет
// выводить слайды так, чтобы указанное изображение было видно.
onClick : function() { return false; }
// Возвратная функция для события click на слайде.
// Пример получения номера слайда, на котором нажали кнопку мыши:
/*
$('#carousel').elastislide({
onClick : function( $item ) {
alert( 'кнопку мыши нажали на слайде № ' + $item.index() )
}
});
*/
Также возможно динамически добавлять новый пункт в карусель. Следующий пример показывает, как выполнить дополнение нового пункта:
var $items = $('<li><a href="#"><img src="images/large/1.jpg" alt="image01" /></a></li><li><a href="#"><img src="images/large/2.jpg" alt="image01" /></a></li>');
$('#carousel').append($items).elastislide( 'add', $items );
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.