Xiper

Слайдер jQuery Cycle

Автор: Александр Головко Дата публикации:

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

Поддерживает кнопки навигации и программное управление (остановка, запуск, вызов функции при смене слайда).

Простейший демо-пример — минимум возможностей, просто смена слайдов.

Проверено в:

  • IE 7+
  • Firefox
  • Opera
  • Chrome
  • Safari

Что качать?

Быстрый старт

Подключаем библиотеки:

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

Создаем html-код слайдера, например так:

<div class="slideshow">
	<a href="#"><img src="pic/pic1.jpg" width="150" height="113" alt=""></a>
	<a href="#"><img src="pic/pic2.jpg" width="150" height="113" alt=""></a>
	<a href="#"><img src="pic/pic3.jpg" width="150" height="113" alt=""></a>
	<a href="#"><img src="pic/pic4.jpg" width="150" height="113" alt=""></a>
</div>

Инициализируем слайдер:

<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
		fx: 'fade',
		speed: 200, 
	    timeout: 1000
	});
});
</script>

Вот и все!

А теперь подробнее

Все прямые потомки элемента, на который воздействовал плагин (в нашем случае все теги a внутри <div class="slideshow">) станут слайдами. Так что можно листать не только картинки, но и делать любые текстовые слайды.

Для управления слайдером служат команды.

Название команды Описание
pause ставит слайдшоу на паузу, запустить можно командой 'resume'
resume снимает слайдшоу с паузы
toggle переключает состояние pause/resume
next переход к следующему слайду
prev переход к предыдущему слайду
stop останавливает слайдшоу
destroy останавливает слайдшоу и отменяет обработчики событий

Задаются они прямо при обращении к элементу-слайдеру. К примеру, так:

$('.slideshow').cycle('pause');

При инициализации передаем различные параметры-настройки, влияющие на работу плагина.

Параметры cycle()

Название параметра Описание значение по умолчанию
activePagerClass Имя класса, используемое для активного элемента навигации 'activeSlide'
after функция вызывающаяся после показа слайда: function(currSlideElement, nextSlideElement, options, forwardFlag) null
allowPagerClickBubble разрешает или запрещает для навигации событие click пришедшее по принципу Bubble false
animIn свойства определяющие характеристики показанного слайда null
animOut свойства определяющие характеристики скрытого слайда null
autostop останавливает слайдшоу после n переходов 0
autostopCount номер перехода (опционально используется вместе с autostop для задания n) 0
backwards если true, то слайд-шоу начинается на последнем слайде и двигается в обратном направлении false
before функция вызывающаяся до показа слайда: function(currSlideElement, nextSlideElement, options, forwardFlag) null
cleartype true если должна быть применена коррекция clearType (для IE) !$.support.opacity
cleartypeNoBg выставь в true чтоб убрать дополнительный фиксинг clearType (false, чтоб выставить настройки фонового цвета на слайдах) false
containerResize размер контейнера в соотношении с наибольшим слайдом 1
continuous true, чтоб начать следующий переход сразу после завершения текущего 0
cssAfter свойства определяющие состояние слайда после перехода с него null
cssBefore свойства определяющие состояние слайда перед переходом на него null
delay дополнительная задержка (в ms) для первого перехода (внимание: может быть отрицательной) 0
easeIn функция easing для перехода на слайд null
easeOut функция easing для ухода со слайда null
easing функция easing одинаковая для перехода на слайд и ухода с него null
end функция обратного вызова вызывается, когда завершается слайд-шоу (используется с autostop или nowrap параметрами): function(options) null
fastOnEvent ускоряет переход, при переключении слайдов вручную (через навигацию или кнопки prev/next). Указывается время в мс 0
fit заставляет слайды соответствовать размеру контейнера 0
fx имя эффекта перехода (или несколько имен, разделенных запятой, напр.: 'fade,scrollUp,shuffle') 'fade'
fxFn функция, используемая для управления перходом: function(currSlideElement, nextSlideElement, options, afterCalback, forwardFlag) null
height высота контейнера (если 'fit' стоит true, слайды будут такой же высоты) 'auto'
metaAttr data- атрибут, который содержит опции данных для слайд-шоу 'cycle'
next элемент, объект jQuery или селектор jQuery для элемента используемый как триггер для следующего слайда null
nowrap true, чтобы предотвратить слайд-шоу из контейнера 0
onPagerEvent функция обратного вызова для событий навигации: function(zeroBasedSlideIndex, slideElement) null
onPrevNextEvent функция обратного вызова для событий prev/next: function(isNext, zeroBasedSlideIndex, slideElement) null
pager элемент, объект jQuery или селектор jQuery для элемента, используемый как контейнер навигации null
pagerAnchorBuilder функция обратного вызова для построения ссылок: function(index, DOMelement) null
pagerEvent имя события, переключения постраничной навигации 'click.cycle'
pause true, чтоб срабатывала пауза при наведении курсора на слайд 0
pauseOnPagerHover true, чтоб срабатывала пауза при наведении курсора на постраничную навигацию 0
prev элемент, объект jQuery или селектор jQuery для элемента используемый как триггер для предыдущего слайда null
prevNextEvent событие, которое запускает принудительный переход к предыдущему или следующему слайду 'click.cycle'
random true для случайного, false для последовательного перехода (не применимо к функции shuffle) 0
randomizeEffects если используется несколько эффектов; true чтобы сделать последовательность эффектов случайной 1
requeueOnImageNotLoaded запрашивает слайд-шоу, если любое из изображений слайдов еще не загружено true
requeueTimeout задержка в мс для запроса 250
rev вызывает анимации для перехода в обратную сторону (для эффектов которые их поддерживают, напр. scrollHorz/scrollVert/shuffle) 0
shuffle координаты для анимации shuffle, напр: { top:15, left: 200 } null
slideExpr выражение для выбора слайда null
slideResize приводит width/height слайда к фиксированному размеру перед каждым переходом 1
speed скорость перехода (любая валидная функция для значения скорости) 1000
speedIn скорость перехода на слайд null
speedOut скорость перехода со слайда null
startingSlide индекс первого слайда, который будет отображаться (отстчет начинается с нулевого) 0
sync true если переход на слайд и со слайда происходят одновременно 1
timeout задержка между переходами в миллисекундах (0 для отключения автосмены слайдов) 4000
timeoutFn функция обратного вызова для определения значения задержки послайдово: function(currSlideElement, nextSlideElement, options, forwardFlag) null
updateActivePagerLink функция вызывается при установке/удалении класса activePagerClass null
width ширина контейнера (если 'fit' стоит true, слайды будут такой же ширины) null

Слайдер с кнопками управления

Добавляем в код навигационные элементы:

<div id="slideshow">
	<a href="#"><img src="pic/pic1.jpg" width="150" height="113" alt=""></a>
	<a href="#"><img src="pic/pic2.jpg" width="150" height="113" alt=""></a>
	<a href="#"><img src="pic/pic3.jpg" width="150" height="113" alt=""></a>
	<a href="#"><img src="pic/pic4.jpg" width="150" height="113" alt=""></a>
</div>
<div>
	<a href="#"><span id="prev">Prev</span></a> 
    <a href="#"><span id="next">Next</span></a>
    <ul id="nav"></ul>
</div>

При инициализации задаем идентификаторы элементов управления и функцию, динамически создающую навигацию:

<script type="text/javascript">
$(function() {
    $('#slideshow').cycle({
        fx:      'scrollHorz',
        timeout:  0,
        prev:    '#prev',
        next:    '#next',
        pager:   '#nav',
        pagerAnchorBuilder: pagerFactory
    });
    function pagerFactory(idx, slide) {
        return '<li><a href="#">'+(idx+1)+'</a></li>';
    };
});
</script>

Демо-пример

Проверено в:

  • IE 7+
  • Firefox
  • Opera
  • Chrome
  • Safari

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

Материал:

  • jQuery Cycle Plugin