Слайдер 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- }) -}) -
В даному прикладі ми вказали, що варто автоматично перегортати слайди.
Отже, як ви можете бачити, слайдер дуже простий в установці та налаштування, але дозволяє робити по-правді шикарні речі. Дякую за увагу і до зустрічі!
- Multidialer
- Як зробити слайдер на чистому css3 без використання jаvascript.
- Як зробити лічильник зворотного відліку на jquery.
- Як вивести спеціальні символи на jquery.
- Як налаштувати функцію "не турбувати" в центрі повідомлень ios6
- Як зробити екскурсію по сайту на jquery.
- Як зробити перемикачі в стилі ios7.
- Як створити progressbar за допомогою плагіна для jquery.
- Як зробити блоки зі слайдер ефектом на чистому css3.
- Як відстежувати позицію мишки на jаvascript.
- Ефект плавного перегортання на jаvascript.
- Слайдер зображень на jquery без плагінів
- Ротатор декількох зображень на jаvascript
- Бібліотека d3js. Робимо круті 3d і 2d об`єкти.
- Красива форма з індикатором заповнення.
- Скрипт галереї + слайд-шоу на jаvascript
- Плавне зміна зображення в jаvascript
- Радіо кнопки у вигляді слайдера.
- Красиві модальні вікна на jаvascript.
- Плагін для створення архіву на jquery.
- Ротатор зображень на jаvascript з кнопками