Slick
“Слік-слайдер” – функціональний плагін-на jQuery слайдер з широким набором можливостей.
Має більше 10 режимів відображення:
- заповнення всієї ширини батьківського блоку;
- батьківський блок поділений на частини, кількість підблоків вказується в налаштуваннях;
- елементи слайдера можуть мати різну ширину;
- виділення активного слайда за рахунок збільшення розміру;
- використання зображень в якості елементів слайдера;
- автовідтворення;
- додавання та видалення слайдів за допомогою користувальницького інтерфейсу;
- фільтрація;
- відображення активного слайда на іншому екрані;
- перемикання слайдів справа наліво.
Підключення файлу стилів:
Підключення JavaScript:
Ініціалізація:
$(document).ready(function(){
$(‘.your-class’).slick({
setting-name: setting-value
});
});
Your-class – це клас батьківського блоку слайдера.
Налаштування:
Arrows відповідає за активацію стрілок навігації. За замовчуванням true.
Autoplay за замовчуванням заданий як false і управляє нескінченним відтворенням слайдів.
З допомогою autoplaySpeed задається швидкість, спочатку вона дорівнює 3000.
У cssEase задається спосіб анімації перемикання слайдів.
Для відображення пагинации необхідно встановити значення dots: true.
У DotsClass виставляється клас для контейнера з пагінація.
Щоб перегортати слайди мишею, в налаштуваннях draggable вказується true.
При наведенні миші на елемент рух слайдера припиняється з допомогою значення pauseOnFocus, а кліком – focusOnSelect.
Infinite – зациклення слайда.
Щоб мати можливість перегортати слайди на мобільних пристроях, використовується значення swipe: true.
При необхідності анімаційні ефекти CSS відключаються за допомогою useCSS false і useTransform false.
Слайдер може бути не тільки горизонтальною, але і вертикальним. Для цього використовується vertical true.
Зміна порядку зміни слайдів справа наліво (rtl: true.
Сторінка: 1 2 3 4 5 6 7 8 9 10 11 12
