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

14 декабря 2014 Антон Кулешов 1716 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
Читайте далее

Эффект лупы при помощи jQuery плагина

25 сентября 2014 Антон Кулешов

Наверняка на многих сайтах вы видели такой функционал как зумирование изображений, особенно это любят делать в интернет магазинах. Это позволяет пользователю максимально детально рассмотреть интересующий его товар. В этой статье мы рассмотрим один из jQuery плагинов, который решает эту задачу.

Слайдер карусель

7 октября 2015 Антон Кулешов

Желание выделиться и огромная конкуренция вынуждает веб-мастеров делать сайты интересными и запоминающимися. Трудно представить, сколько времени, зачастую, тратится на то, чтобы придать странице особый шарм. И сегодня я хочу рассказать про jQuery плагин Cloud 9 Carousel – это скрипт, которой позволяет сделать 3D слайдер карусель.

jQuery плагин - эффект текста по дуге

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

Сегодня мы рассмотрим, как добавить к себе на страницу текст дугой. Это решение поможет сделать ваши заголовки более заметными и интересными.