Показать Меню
falbar Coin Slider

Слайдер с красивыми эффектами - Coin Slider

Coin Slider

Совсем недавно, работая над новым сайтом, мне потребовался слайдер с красивыми эффектами. Ранее я описывал два достойных решения, которые в большинстве случаев подходят. В этот раз я хочу уделить внимание jQuery плагину под названием Coin Slider.

Главным отличием Coin Slider является то, что картинка разбивается на определённое число частей, которые плавно сменяют друг друга. Этот эффект выглядит красиво и необычно, возможно именно такой слайдер Вам может пригодиться, по крайне мере, когда я наткнулся на это решение - сразу добавил себе в закладки.

Теперь непосредственно как с ним работать. Скачиваем архив и из него подключаем два файла к своему проекту, не забывая конечно про jQuery библиотеку.

<link href="coin-slider-styles.css" type="text/css" rel="stylesheet" />
<script src="coin-slider.js" type="text/javascript" ></script>

Теперь нам стоит разместить HTML структуру у себя на странице:

<div id="coin-slider">
	<a href="url" target="_blank">
		<img src="img_01.png" alt="image" />
		<span>
			Описание к img_01
		</span>
	</a>
	......
	......
	<a href="url_N">
		<img src="img_N.png" alt="image" />
	</a>
</div>

Далее вызываем сам плагин, чтобы всё заработало:

$("#coin-slider").coinslider();

Как у любого хорошего слайдера, у Coin Slider - есть свой набор настроек, при помощи которого можно его подстроить под себя.

width: 565,			// ширина слайдера
height: 290, 		// высота слайдера
spw: 7, 			// кол-во частей изображения по ширине
sph: 5, 			// кол-во частей изображение по высоте
delay: 3000, 		// задержка между сменой слайдов (мс)
sDelay: 30, 		// задержка между "затуханием" частей
opacity: 0.7, 		// прозрачность блока описания и кнопок навигации (next/prev)
titleSpeed: 500, 	// скорость "проявки" блока описания
effect: '', 		// эффект смены ("random", "swirl", "rain", "straight")
links : true, 		// делать изображения ссылками
hoverPause: true 	// остановка при наведении
navigation: true,   // наличие кнопок навигации
prevText: "prev",	// Текст prev кнопки
nextText: "next",	// Текст next кнопки
showNavigationPrevNext: true, 		 // наличие кнопок (next/prev) 
showNavigationButtons: true,  		 // наличие кнопок навигации
navigationPrevNextAlwaysShown: false // показывать кнопки навигации всегда

Как видите, почти всё учтено. Особое внимание можно уделить эффектам у плагина. Их - три вида: swirl, rain, straight. По умолчанию установлено случайное отображение. Также стоит отметить, что параметрами spw и sph пользоваться нужно аккуратно. Так как изображение делится на части, а, при их большом количестве, браузер может не справляться с их обработкой и, в итоге, начнёт подвисать.

Скачать слайдер Вы можете с официального сайта или с этой страницы, а пример работы изучить в материалах «демо».

Источник
github.com

Подписаться на обновления

Комментариев еще не оставлено