1. На початку HTML документа підключаємо бібліотеку і плагін jQuery.
2. Додаємо блок DIV, в якому знаходяться посилання на зображення, які використовуються в слайд-шоу.
3. Зв'язуємо наш блок div id = "s1" з плагіном jQuery Cycle. Ця ділянка коду можна вставити в сам html документ або винести в окремий js файл, як зроблено в прикладі.
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-ефект при зникненні слайда.