Flexslider - адаптивний слайдер - скрипти для сайтів

Flexslider - адаптивний слайдер - скрипти для сайтів

Розглянемо базову використання слайдера, а саме перший приклад з Демо.

Контейнер всередині якого знаходиться невпорядкований список з нашими картинками:

Підключається файл стилів плагіна:

Підключається 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 Хто скачав?

Схожі статті