Слайдер миниатюр с помощью плагина jQuery Слайдер миниатюр с помощью плагина jQuery



 

Хотите создать слайдер с миниатюрами изображений для Вашего сайта, да так чтобы они корректно отображались в браузерах и были адаптированы под изменения размеров окна обозревателя, тогда этот урок Вас должен заинтересовать. Для этого мы будем использовать 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 );

 

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.


Top

🔖 Выбор по тегам ×

💌 Написать сообщение ×

Все поля обязательны для заполнения!