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

14 декабря 2014 Антон Кулешов 1803 0

Совсем недавно, работая над новым сайтом, мне потребовался слайдер с красивыми эффектами. Ранее я описывал два достойных решения, которые в большинстве случаев подходят. В этот раз я хочу уделить внимание 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 - ширина слайдера;
  • height - высота слайдера;
  • spw - кол-во частей изображения по ширине;
  • sph - кол-во частей изображение по высоте;
  • delay - задержка между сменой слайдов (мс);
  • sDelay - задержка между «затуханием» частей;
  • opacity - прозрачность блока описания и кнопок навигации (next/prev);
  • titleSpeed - скорость «проявки» блока описания;
  • effect - эффект смены («random», «swirl», «rain», «straight»);
  • links - делать изображения ссылками;
  • hoverPause - остановка при наведении;
  • navigation - наличие кнопок навигации;
  • prevText - текст prev кнопки;
  • nextText - текст next кнопки;
  • showNavigationPrevNext - наличие кнопок (next/prev);
  • showNavigationButtons - наличие кнопок навигации;
  • navigationPrevNextAlwaysShown - показывать кнопки навигации всегда.

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

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

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