Демо окно №3 - опции управления
<Закрыть окно>
Для удобства просмотра, кликните по названию эффекта в списке или на сам пример, чтобы оставить на странице только его.

  • next
  • next_prev
  • pager
  • stop
  • pause

1. Пример запуска движения (next)

Кликните по слайду для его смены

$('#next').cycle({ 
    fx:   'slideY',
	next: '#next',
    timeout:  0
}); 

2. Пример Вперёд/Назад (next_prev)

Prev Next

$('#next_prev').cycle({ 
    fx:      'slideY',
	next: '#next_slide',
	prev: '#prev_slide',
    timeout:  0
}); 

3. Постраничня навигация (pager)

$('#pager').cycle({ 
    fx:      'slideX',
    timeout:  0,
    pager: '#nav'
}); 

Для вывода навигации необходимо лишь прописать пустой тег с соответствующим идентификатором (в нашем случае #id). Не забудьте добавить в таблицу стилей вид навигационных кнопок.



<div id="nav"></div>
<style>
#nav a { border: 1px solid #ccc; background: #fc0; text-decoration: none; margin: 0 5px; padding: 3px 5px; }
#nav a.activeSlide { background: #ea0 }
#nav a:focus { outline: none; }
</style>

4. Кнопка СТОП (stop)

$('#stop').cycle({ 
    fx:      'scrollUp', 
    easing: 'bouncein' 
});
$("#stop_button").click(function(){
$('#stop').cycle('stop');
}); 

5. Пример Пауза/Пуск (pause)

 
$('#pause').cycle({ 
    fx:      'scrollUp'   // эффект как в предыдущем примере но easing
нет(нет подпрыгивания в начале смены) }); $("#pause_button").click(function(){ $('#pause').cycle('pause'); }); $("#resume_button").click(function(){ $('#pause').cycle('resume'); });


 <button id="pause_button">Пауза</button><button id="resume_button">Пуск</button>