Слайдер slick.

Привіт всім і сьогодні я розповім про дуже класний, а головне простий слайдер - slick.

Зайдіть на сайт https://kenwheeler.github.io/slick/ Там ви зможете знайти дуже багато прикладів роботи слайдера slick. У даного слайдера правда дуже багато самих різних ефектів і, також, є прокрутка мишкою. Тобто ви можете натиснути на який-небудь елемент в слайдері лівою кнопкою мишки і, утримуючи її, перемотати слайдер вліво або вправо. Ця функція не зовсім корисна для комп`ютерів, але на смартфонах і планшетах - саме те!

Відео: 3. Адаптивний слайдер для сайту - Slick.js

Отже, щоб його підключити, скачайте файли з сайту, даного вище. тепер створимо html і підключимо необхідні компоненти, зокрема jquery, тому слайдер використовує цю бібліотеку для своєї роботи.

class="Your-class"gt; 
 your content 
 your content 
 your content

Підключіть стилі

rel="Stylesheet"href="Slick / slick.css"/ Gt;

І підключіть скрипти

Відео: 1 Адаптивний слайдер для сайту Slick js

Щоб форматувати слайдер, в тезі script пропишіть наступне:

$(document).ready(function() { 
 $(`.your-class`).slick({ 
 setting-name: setting-value 
}) - 
}) -

В кінцевому підсумку ваш html файл буде виглядати приблизно так:

 




 
Slick 
rel="Stylesheet"href="Slick / slick.css"/ Gt; 
 
 
 
class="Your-class"gt; 
 your content 
 your content 
 your content

У даного слайдера чимало установок, які ви можете задати самі. Знайти їх все ви можете все на тому ж сайті внизу сторінки в табличці. Задавати їх варто при ініціалізації в об`єкті.

$(document).ready(function() { $(`.your-class`).slick({autoplay:true- }) -}) -

В даному прикладі ми вказали, що варто автоматично перегортати слайди.

Отже, як ви можете бачити, слайдер дуже простий в установці та налаштування, але дозволяє робити по-правді шикарні речі. Дякую за увагу і до зустрічі!

Поділися в соціальних мережах:

Схожі