Слайдер Coin Slider

Бороздя просторы сети, наткнулся на симпатичный слайдер, воткнув его в закладки, продолжил поиски нужной, на тот момент, информации. "Это судьба" — подумал я, когда, буквально на следующий день, для очередного проекта понадобился слайдер :).

Встречаем — "Coin Slider"! Смотрим, что умеет. Проверено в:

• IE 6-8
• Firefox 2+
• Opera 9+
• Safari 2+
• Chrome 3+

Что качать?

• jQuery
• Coin Slider v1.0 (архив с плагином и стилями)

Быстрый старт

Подключаем плагин и стили:

<link rel="stylesheet" type="text/css" href="css/coin-slider-styles.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="js/coin-slider.min.js"></script>

Код конструкции:

<div class="sliderContainer">
	<div id="coin-slider">
		<a href="">
			<img src="pic/img1.jpg" alt="" width="450" height="301" />
			<span>Комментарий к фото 1</span>
		</a>
		<a href="">
			<img src="pic/img2.jpg" alt="" width="450" height="312" />
			<span>Комментарий к фото 2</span>
		</a>
		<a href="">
			<img src="pic/img3.jpg" alt="" width="450" height="360" />
			<span>Комментарий к фото 3</span>
		</a>
		<a href="">
			<img src="pic/img4.jpg" alt="" width="450" height="299" />
			<span>Комментарий к фото 4</span>
		</a>
		<a href="">
			<img src="pic/img5.jpg" alt="" width="450" height="338" />
			<span>Комментарий к фото 5</span>
		</a>
		<a href="">
			<img src="pic/img6.jpg" alt="" width="450" height="338" />
			<span>Комментарий к фото 6</span>
		</a>
		<a href="">
			<img src="pic/img7.jpg" alt="" width="450" height="338" />
			<span>Комментарий к фото 7</span>
		</a>
	</div>
</div>	

Фактически, все будет работать и без контейнера .sliderContainer, но в реале он необходим, дабы однозначно определить область, в которой будет размещен слайдер (я только ограничил ширину).

Инициализируем слайдер:

jQuery('#coin-slider').coinslider();

Некоторые подробности

Как любой приличный плагин, Coin Slider имеет ряд параметров:

Параметры

Вызов с параметрами выглядит как обычно:

jQuery("#coin-slider").coinslider({	
	width: 400,
	height: 300,
	spw: 5,
	sph: 4
});

Оформление

Изменить оформление не составит труда, стили для всех ключевых элементов вынесены в css-файл, прилагающийся к плагину:

/* оформление для контейнера(родного) и ссылки на слайде */
.coin-slider { overflow: hidden; zoom: 1; position: relative;  }
.coin-slider a{ text-decoration: none; outline: none; border: none;}
/* оформление блока навигации, пунктов (в том числе активного) */
.cs-buttons { font-size: 0px; padding: 10px; float: left;}
.cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; }
.cs-active { background-color: #B8C4CF; color: #FFFFFF; }
/* оформление блока описания, кнопок prev и next */
.cs-title { width: 545px; padding: 10px; background-color: #000000; color: #FFFFFF; }
.cs-prev, 
.cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }

Все доступно и понятно.

Заметки

Обращаю внимание на тот факт, что поскольку плагин динамически разбивает изображение на части (общее их количество поучится spw умножить на sph), и уже с ими манипулирует. Для "некоторых" браузеров это окажется тяжелой ношей, поэтому для IE6-8, есть смысл подобрать оптимальные значения для параметров spw и sph, ибо тупят :). Например так:

if (jQuery.browser.msie == true)
jQuery("#coin-slider").coinslider({	
	spw: 3,
	sph: 3
})
else
jQuery("#coin-slider").coinslider({	
	spw: 8,
	sph: 8
});

Преимущества

• небольшой вес (8кб);
• кроссбраузерность, валидность;
• возможность абсолютной настройки (любой дизайн);
• оригинальность эффектов.

Материалы

• Официальный сайт