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

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

Увеличение картинки с помощью эффекта лупы на jQuery

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

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

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

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

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

Аутентификация через Twitter

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

Продолжаем тему аутентификации через социальные сети и сегодня поговорим о Twitter.