Слайдер jQuery Cycle

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

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

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

Проверено в:

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

Что качать?

• библиотеку jquery качаем или подключаем из хранилища.
• jquery.cycle.js (46 Kb) сам плагин или его облегченную версию jquery.cycle.lite.js (8 Kb)

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

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

<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»>) станут слайдами. Так что можно листать не только картинки, но и делать любые текстовые слайды.

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

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

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

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

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

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

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

<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