О сайтеПравилаКонтакты
  • Крипто
  • Новости
  • Статьи
  • Люди
  • Теги
» Статьи » Разработка » Слайдер с красивыми эффектами - Coin Slider
  • Инструменты
  • Заработок
  • Раскрутка
14 декабря 2014 . Антон Кулешов

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

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

#Cлайдеры
6 009
Антон Кулешов
Слайдер карусель Lightbox от falbar или falbox Слайд-шоу на заднем фоне сайта Смена изображений CSS3 слайдер FlexSlider - адаптивный слайдер для сайта
Комментарии не найдены

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

Новостная лента на jQuery

Популярное
1 Пишем парсер контента на PHP2 Кликджекинг как соцфишинг, пишем скрипт для получения id пользователя вконтакте3 Лучший способ прижать футер используя flexbox4 Пишем первый модуль для 1С-Битрикс с использованием ядра D75 Делаем подгрузку контента при прокрутке страницы
Обратите внимание
kwork