Главным отличием 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 пользоваться нужно аккуратно. Так как изображение делится на части, а, при их большом количестве, браузер может не справляться с их обработкой и, в итоге, начнёт подвисать.
Скачать слайдер вы можете с официального сайта или с этой страницы, а пример работы изучить в материалах «демо».
