Показать Меню
falbar Слайдер с эффектом занавеса

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

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

Здравствуйте читатели Фалбар. Недавно я обозревал нестандартный слайдер с красивыми эффектами при смене картинок. В этот раз я хочу рассказать про слайдер 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: 500, 					// ширина слайдера
height: 332, 					// высота слайдера
strips: 20, 					// число полос
delay: 5000, 					// время смены картинок в ms
stripDelay: 50, 				// время смены полосок в ms
titleOpacity: 0.7,				// прозрачность заголовка
titleSpeed: 1000, 				// скорость появления заголовка в ms
position: "alternate", 			// top, bottom, alternate, curtain
direction: "fountainAlternate", // left, right, alternate, random, fountain, fountainAlternate
navigation: false, 				// показывать кнопки prev, next и навигационные
links: false 					// сделать картинки ссылками

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

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

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

Спасибо за внимание.

Источник
workshop.rs

Подписаться на обновления

Комментариев еще не оставлено