Недавно я обозревал нестандартный слайдер с красивыми эффектами при смене картинок. В этот раз я хочу рассказать про слайдер 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();
Вот и всё. В результате этих действий у вас на странице появится простой слайдер на jQuery. В настройках по умолчанию не предусмотрено наличие кнопок навигации и заданы жесткие размеры, но это легко можно изменить, указав соответствующие параметры. Также у слайдера есть в наличии три варианта эффекта занавеса (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>
Все материалы вы сможете скачать с официального сайта или с этой страницы. Результат работы плагина можно увидеть, перейдя по ссылке «демо».