Реализация слайд-шоу при помощи плагина JQuery cycle

Последнее время приходится всё чаще использовать слайд-шоу в работе. Применял различные скрипты, писал свой, но щас не об этом а о готовом неплохом скрипте - плагине JQuery cycle. Хорошее решение для быстрой реализации слайдера.

Небольшой пример использования скрипта в своём коде:

1. Подключаем необходимые библиотеки

<script type='text/javascript' src='jquery.js'></script>
<script type="text/javascript" src="jquery.cycle.all.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.1.1.js"></script>

 

2. Контейнер с картинками

<div id="slider">
<img src="img/img1.jpg" />
<img src="img/
img2.jpg" />
<img src="img/img3.jpg" />
<img src="img/img4.jpg" />
<img src="img/img5.jpg" />
</div>

3.Использование плагина

$(document).ready(function() {
$('#slider').cycle({
fx: 'scrollLeft',
speed: 1000,
timeout: 2000
});
});

 

 Опции плагина:

  • fx - имя эффекта
  • speed - скорость
  • timeout - время показа
  • random - показ слайдов случайным образом (активация - random: 1 )
  • pause - при наведении мышью смена изображений останавливается (активация - pause: 1 )
  • easing - имя easing-эффекта (работает только при подключенном плагине jQuery Easing Plugin v1.1.1). 
  • delay - задержка. Добавляется к таймауту первого слайда. Опция может быть полезна при наличии нескольких слайдов на странице, т.е. можно сделать чтобы слайды у разных наборов менялись неодновременно, сохраняя при этом одинаковое время показа.
  • sync - контролирует, происходят ли смены слайдов синхронно? По умолчанию опция включена (отключаем - sync: 0). 

 

Опции управления :

  • next - следующий. Пример: next: '#next_slide', здесь #next_slide - элемент, который будет выступать в качестве кнопки "next"
  • prev - предыдущий. Пример: prev: '#prev_slide', здесь #prev_slide - элемент, который будет выступать в качестве кнопки "prev"
  • pager - создает постраничную навигацию слайдов. Пример: pager: '#nav', здесь #nav - пустой элемент, который будет преобразован в постраничный переключатель.
  • stop - остановка слайдшоу.
  • pause - пауза. resume - продолжение. Позволяет по событию приостановить и продолжить показ слайдов

*Обратите внимание, что stop, pause, resume в этом случае привязывается к событию, а не прописывается в настройках эффекта.

Опции обратного вызова :

  • before - функция, которая должна выполниться во время перехода. Пример: before: onBefore, здесь onBefore- какая-либо функция.
  • after - функция, которая должна выполниться после завершения перехода. Пример: after: onAfter, здесь onAfter- какая-либо функция.

Дополнительные опции :

  • speedIn - Скорость появления слайда. В случае использования этой опции, опция speed не нужна.
  • speedOut - Скорость исчезновения слайда. В случае использования этой опции, опция speed не нужна.
  • easeIn - easing-эффект при появлении слайда.
  • easeOut - easing-эффект при исчезновении слайда.

 






У данной записи пока нет ниодного комментария
АРХИВ
МЕТКИ БЛОГА
follow me 

© GORDOV.COM 2009 — 2020