Слайдер на jQuery с эффектом занавеса

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

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

Реклама

Начнем с установки jqFancyTransitions на наш сайт. Для этого вначале мы подключаем jQuery библиотеку и сам скрипт:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jqFancyTransitions.1.8.min.js" type="text/javascript"></script>

Затем нам необходимо добавить HTML разметку на страницу:

<div id="slideshowHolder">
	<img src="img/img1.jpg" alt="Картинка № 1" />
	<img src="img/img2.jpg" alt="Картинка № 2" />
	<img src="img/img3.jpg" alt="Картинка № 3" />
	<img src="img/img4.jpg" alt="Картинка № 4" />
</div>

И в завершении вызываем плагин:

$("#slideshowHolder").jqFancyTransitions();

Вот и всё. В результате этих действий у вас на странице появится слайдер. В настройках по умолчанию не предусмотрено наличие кнопок навигации и заданы жесткие размеры, но это легко можно изменить, указав соответствующие параметры. Также у слайдера есть в наличии три варианта эффекта занавеса (wave, zipper, curtain), что позволит вам выбрать более подходящий для своего сайта.

Вот полный перечень настроек, которые предоставляет нам плагин jqFancyTransitions:

  • effect - эффекты: wave, zipper, curtain;
  • width - ширина слайдера;
  • height - высота слайдера;
  • strips - число полос;
  • delay - время смены картинок в ms;
  • stripDelay - время смены полосок в ms;
  • titleOpacity - прозрачность заголовка;
  • titleSpeed - скорость появления заголовка в ms;
  • position - top, bottom, alternate, curtain;
  • direction - left, right, alternate, random, fountain, fountainAlternate;
  • navigation - показывать кнопки prev, next и навигационные;
  • links - сделать картинки ссылками.

Как видите, если поиграться с настройками, можно достичь красивых и интересных результатов. Осталось только пояснить последний параметр links. Для того, чтобы он заработал правильно, вам потребуется после каждого элемента img добавить ссылку.

<img src="img1.jpg" alt="img1" />
<a href="http://falbar.ru/"/></a>

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

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

Как быстро найти и скачать нужные драйвера

18 июля 2014 ti1schweiger

Совсем недавно столкнулся с проблемой: найти и скачать драйвера для ноутбука HP. Модель была относительно новая с предустановленной восьмеркой, после сноса её и установки Windows 7 добрый десяток устройств отказались адекватно работать из-за отсутствия необходимых драйверов.

Всплывающие подсказки на чистом CSS

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

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

«Дюжина» ховер эффектов в одном флаконе

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

Продолжаем развивать тему hover effects и обратим наше внимание на весьма интересный плагин на jQuery, при помощи которого можно реализовать кучу различных эффектов ховера.