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

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

FlexSlider - адаптивный слайдер для сайта

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

Сегодня мы рассмотрим адаптивный слайдер на jQuery – FlexSlider. В самом начале хочется отметить несколько пунктов, которыми можно его описать при первом знакомстве.

Как сделать вкладки-табы для сайта на jQuery

30 января 2015 Антон Кулешов

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

Делаем красивые модальные окна при помощи «Sweet Alert» плагина

11 октября 2014 Антон Кулешов

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