Розглянемо базову використання слайдера, а саме перший приклад з Демо.
Контейнер всередині якого знаходиться невпорядкований список з нашими картинками:
Підключається файл стилів плагіна:
Підключається jQuery. сам плагін і його ініціалізація з необхідними опціями:
Інші приклади дивіться в Демо.
Опції за замовчуванням:
- namespace. "Flex-", // String: Префікс, що прикріплюється до класу кожного елемента згенерованого плагіном
- selector. ".slides> li", // Selector: Повинен відповідати простому шаблоном. '>' - Ігноруйте шаблон на свій страх і ризик
- animation. "Fade", // String: Тип анімації, "fade" або "slide"
- easing. "Swing", // String: Визначає перехід підтримуваний плагіном jQuery easing.
- direction. "Horizontal", // String: Вибір напрямку зміни зображень "horizontal" або "vertical"
- reverse. false, // Boolean: реверс напрямки анімації
- animationLoop. true, // Boolean: Циклічність анімації. Якщо false, directionNav буде додавати клас "disable" на обох кінцях слайдера
- smoothHeight. false, // Boolean: Allow height of the slider to animate smoothly in horizontal mode
- startAt. 0, // Integer: Слайд з якого має починатися слайдшоу. Масив (0 = перший слайд)
- slideshow. true, // Boolean: Включення автослайдшоу
- slideshowSpeed. 7000, // Integer: Швидкість слайдшоу в мс
- animationSpeed. 600, // Integer: Швидкість анімації в мс
- initDelay. 0, // Integer: Затримка ініціалізації в мс
- randomize. false, // Boolean: Випадковий порядок слайдів
// Використання функцій
- pauseOnAction. true, // Boolean: Pause the slideshow when interacting with control elements, highly recommended.
- pauseOnHover. false, // Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
- useCSS. true, // Boolean: Slider will use CSS3 transitions if available
- touch. true, // Boolean: Allow touch swipe navigation of the slider on touch-enabled devices
- video. false, // Boolean: If using video in the slider, will prevent CSS3 3D Transforms to avoid graphical glitches
// Первинне управління
- controlNav. true, // Boolean: Створення навігації для посторінкового управління кожним слайдом. Зауваження: залиште true для використання manualControls
- directionNav. true, // Boolean: Створення навігації для кнопок назад / вперед (true / false)
- prevText. "Previous", // String: Тест для кнопки "previous" пункту directionNav
- nextText. "Next", // String: Тест для кнопки "next" пункту directionNav
// Вторинна навігація
// Спеціальні властивості
// Опції каруселі
- itemWidth. 0, // Integer: Ширина Box-model окремих елементів каруселі, включаючи горизонтальні кордони і відступи (padding)
- itemMargin. 0, // Integer: Відступ між елменти каруселі
- minItems. 0, // Integer: Мінімальна кількість елементів каруселі, які будуть видимі. Елементи будуть плавно змінювати розмір при значенні нижче заданого
- maxItems. 0, // Integer: Максимальна кількість елменти каруселі, які будуть видимі. Елементи будуть плавно змінювати розмір при перевищенні цього ліміту.
- move. 0, // Integer: Кількість елменти в каруселі, які повинні рухатися по анімації. Якщо 0, то слайдер буде рухати всі видимі елементи
// Callback API
- start. function ()<>, // Callback: function (slider) - Спрацьовує, коли слайдер завантажує перший слайд
- before. function ()<>, // Callback: function (slider) - Спрацьовує асинхронно з кожної анімацією слайдера
- after. function ()<>, // Callback: function (slider) - Спрацьовує після кожної завершеної анімацією слайдера
- end. function ()<>, // Callback: function (slider) - Спрацьовує, коли слайдер доходить до останнього елемента (асинхронний)
- added. function ()<>, // Callback: function (slider) - Спрацьовує після того, як слайд доданий
- removed. function ()<> // Callback: function (slider) - Спрацьовує після того, коли слайд видалений
СКАЧАТИ Стрибок: 4687
1,07 Mb Хто скачав?