Огляд установки слайдера slick під jQuery бібліотеку. Даний плагін займає одне з найвищих місць у рейтингу плагінів для створення слайдшоу.
Напевно, це місце він отримав заслужено, тому варто з ним розібратися та покласти у свою скарбничку веб-розробника. Домашня сторінка плагіна з описом установки та різних прикладів роботи знаходиться тут - slick Demos. Плагін мені сподобався всім - він має у своєму складі всі функції управління, легкий і простий у встановленні, HTML-розмітка для його створення проста та семантична. У комплекті плагін slick має повний набір налаштувань, які легко підключити до конфігураційного файлу.
Підключення плагіна slickПроцес підключення плагіна slick в робочому проекті дуже простий, тільки потрібно дотримуватися правильності виконання кроків.
Створення розмітки під slickHTML-розмітка під плагін slick семантична та проста. Достатньо створити список із довільним ім'ям класу. У посібнику Getting Started на офіційній сторінці плагіна slick наводиться такий приклад HTML-розмітки:
Моя спроба створити слайдер на основі HTML-розмітки у вигляді звичайного маркованого списку:
… успіху не принесла – плагін slick не заробив! Можливо, варто через CSS-стилі перетворити елементи
| 1 | ul |
| 1 | li |
Наступним кроком буде отримання архіву плагіна slick. Це можна зробити кількома способами. Перший - це завантажити його зі сторінки Go Get It. Або ж перейти на сторінку GitHub автора та забрати звідти zip-архів плагіна – slick GitHub. В обох випадках отримаємо архів з ім'ям
HTML-документа здійснюємо підключення готових CSS-стилів плагіна slick:У тілі HTML-документа перед тегом, що закриває
| 1 |
Як бачимо, у перших двох рядках проводиться завантаження бібліотеки jQuery-1.11.0 та плагіна jQuery Migrate 1.2.1 через CDN. Третій плагін
підключаємо скрипт ініціалізації плагіна: $(document). ready (function ()( $ (".slider" ). slick (( dots : true )); ));Підсумкова HTML-розмітка та підключення CSS-таблиць, JS-скриптів буде виглядати таким чином:
Мені хочеться згадати про таку корисну річ, як консоль браузера Google Chrome. Чому вона корисна? Тому що вона вже вдруге рятує мене (вперше це було з плагіном jqFancyTransitions - Слайдер jqFancyTransitions) і допомагає знайти помилки при підключенні скриптів у HTML-документі. Незамінна штука!
Щоб проілюструвати приклад використання та корисності консолі Chrome, запускаю в браузері індексний файл index.html, який створив раніше.
І що?! Дозвольте, а десь плагін slick - де слайдер, створений за його допомогою? Де ті обіцяні краси, які так яскраво продемонстровані на офіційній сторінці проекту – Demos?! Дивно – але їх немає!
Хех, а чи я правильно виконав підключення скрипта? Ну, ще раз "пробігуся" по документації ... Все правильно, але в мене нічого не працює ... Може, все-таки переписати індексну сторінку заново? Можливо, але таких "а може" набереться велика кількість, з різними варіаціями.
Але давайте відкрию консоль браузера Google Chrome і перейду в ній на вкладку "Network":
Ось і причина того, що плагін slick не працює на моїй сторінці! Просто бібліотеку jQuery 1.11.0 та її плагін jQuery Migrate 1.2.1 браузеру Chrome не вдалося підвантажити через CDN. Скільки б я ще витратив часу та нервів, щоб методом “наукового тику” визначити причину “поломки”, якби не ця консоль, невідомо.
Розбиратися, чому не вдалося браузеру підвантажити обидва ці файли через CDN, я не маю ні бажання, ні часу. Тому я просто скачаю обидва ці файли "вручну" і підключу локально:
Знову запускаю індексну сторінку index.html у браузері Google Chrome і … про Чудо! Плагін slick працює:
Картинки прокручуються автоматично і внизу видно пагінацію, згенеровану скриптом slick відповідно до налаштувань:
dots: true, autoplay: true… у конфігураційному файлі. Крім цього, були згенеровані стрілки для перемотування зображень "вручну" туди-сюди (вони не видно на білому тлі HTML-сторінки). Інші численні налаштування плагіна slick можна переглянути на офіційній сторінці - Settings.
NOTE: I високо recommend putting your initialization script в an external JS file.
У цій статті я так не вчинив з однієї простої причини – задля наочності прикладу та швидкості його створення.
Редагування плагіна slickТепер залишилася справа за малим - озброївшись інспектором елементів сторінки (наприклад, Firebug), "витягнемо" з DOM-дерева нашої сторінки імена класів потрібних нам елементів і зробимо їх легке редагування через CSS-правила:
body ( background-color : lighten (#ccc , 5% ); .slider( width : 300px ; margin : 10px auto ; padding : 5px ; background-color : #ccc ; border : 3px solid #000 ; @include borde (3px); .slick-dots( bottom : -30px ; ) ) )Створюю для тіла HTML-документа
додам padding, кордон із заокругленням та фонову заливку; відцентрую його на сторінці і трохи опущу вниз. А також трохи підніму вгору блок| 1 | .slick-dots |
Дивимося результат:
Плагін slick мені однозначно сподобався. Проста установка та підключення, генерування елементів керування показом слайдшоу, велика кількість різноманітних налаштувань. З різноманітними варіантами налаштування зовнішнього вигляду можна і потрібно розібратися на сторінці прикладів - Demos. І підігнати під необхідні конкретні умови, якщо буде потрібно.
Вдалого кодингу!
Здрастуйте, хочу розповісти Вам про слайдер slick slider для сайту який показав себе як легкий, універсальний та простий у встановленні. На ньому можна реалізувати все, що пов'язано зі слайдерами та каруселями. Як заявляє творець плагін "the last carousel you'll ever need", що можна трактувати як єдина універсальна карусель, яка підійде для будь-якого вашого задуму. І це справді так. Чого тільки в ній немає, від звичайного слайдера до адаптивної каруселі зі слайдами до кількох рядів.
Плагін можна спокійно використовувати як початківцям так і досвідченим веб-розробникам. Це дуже сильний конкурент усім знайомого. З коробки ми отримуємо дуже багатозадачний інструмент.
Щоб встановити слайдер/карусель до себе на сайт, достатньо пройти 3 простих кроки.
Установка slick sliderПриклад №1 (Слайдер)1. Крок — Підключення скрипта та стилів плагіна.
html сторінки.
$(document).ready(function()( $(".your-class").slick(); ));
Підключати потрібно між тегами вашої html сторінки, але після коду, який Ви вставляли за крок №1
На цьому прикладі ми показали, як потрібно встановлювати slick slider як карусель з одним основним слайдом.
Нижче можете подивитися наочний приклад те, що описано вище.
Приклад №2(Карусель)Щоб встановити карусель треба зробити все те ж саме, що і в попередньому описі, але крок №2 і крок №3 трохи змінимо.
2. Крок - вставка самого HTML коду слайдера.
Цей код потрібно вставити між тегами , де ви хочете відобразити сам слайдер.
3. Крок – ініціалізація слайдера.
$(document).ready(function()( $(".your-class").slick(( infinite: true, slidesToShow: 3, slidesToScroll: 3 )); ));
А в цьому прикладі ми використовували slick slider як карусель (з 3 основними слайдами) і для цього ми використовували деякі параметри плагіна.
Подивитися роботу цієї каруселі можна на прикладі нижче.
Як бачите всього 3 кроки, і ви отримаєте карусель або слайдер для ваших потреб. Але можливостей та налаштувань цього слайдера дуже багато. Якщо у Вас виникли труднощі або є питання, то задавайте їх у коментарі і я постараюся бістро на них відповісти.
Скрипт слайдера ми завантажили у минулому уроці командою
$ bower i slick.js
Також його можна знайти в Google - перше посилання на запит slick http://kenwheeler.github.io/slick/
Переваги слайдера: підтримує touch events можна переглядати з телефону, гортаючи пальцем- підтримує responsive - можна задати різну кількість слайдів залежно від розміру екрана: на великих екранах переглядати по 4 слайди, на середніх по 2-3, на телефонах по одному
Хороша практика - підключення скриптів із папки bower_components
Тоді при оновленні скрипта програмою bower не доведеться переписувати номер версії в коді, оскільки bower дає скриптам постійні імена, які при оновленні не змінюються.
Що стосується стилів, які знаходяться в папці slick: slick.css, slick.less, slick.theme.less, їх краще скопіювати в папку з css і підключити звідти. Якщо залишити їх на місці і в стилі слайдера вносити зміни, то при оновленні скрипту всі ці зміни будуть втрачені.
На відміну від інших слайдерів, кадри розміщуються не в списку, а в блоках:
1 2 3 4 5 6
Виклик без параметрів Під час виклику плагіна без параметрів отримуємо простий варіант з одним слайдом на сторінці та навігаційні стрілки.$ (".single-item"). slick();
Показ декількох слайдів У прикладі ми встановили для «slick slider» параметри зацикленої прокрутки, включили відображення навігаційних точок, вказали кількість слайдів, що відображаються і прокручуються.$ (".multiple-items"). slick ((
infinite : true ,
//зациклений слайдер - після останнього слайду йде перший dots: true,
// точки під слайдером, що показують активний слайд
slidesToShow : 3 ,
//кількість слайдів, які виводяться на екрані slidesToScroll : 1
//кількість слайдів, які перегортаються за один раз
)); Режим центрування У режимі центрування активний слайд встановлюється центром.
$ (".center"). slick ((
centerMode : true ,
slidesToShow : 3 ,
});
Центральний слайд має клас «slick-center», а значить, можна його окремо оформити. Адаптивність У слайдері можна налаштувати адаптивний висновок певної кількості слайдів залежно від значення ширини екрану. Наприклад, вам необхідно, щоб при ширині екрана менше 600 пікселів виводилося лише 2 слайди, а перемикалися вони по одному. Вирішення цього завдання буде виглядати так
$(".uncycle" ) . slick(( infinite: false , speed: 350 , // визначаємо швидкість перегортання slidesToShow: 4 , //кількість слайдів для показу slidesToScroll: 2 , //скільки слайдів за раз перегорнеться responsive: [ ( breakpoint: 600 , //повідомляє, якій ширині екрана потрібно включати налаштування settings: (slidesToShow: 2, slidesToScroll: 1, infinite: true,))))));
Плавне перемикання У стандартному стані слайдер здійснює різку заміну слайдів. Але функціонал Slick передбачає плавний режим заміни слайдів. Для цього потрібно вдатися до атрибуту data-lazy, в якому прописується шлях до картинки. Атрибут потрібно привласнити не обгортці, а саме тегу зображення. Це дозволить уникнути використання js-коду. Альтернативою буде ця командаLazyLoad: "ondemand"
Атрибут слід записувати так
< img data- lazy = " images/slaid.jpg" >
Особливість такого слайдера полягає в тому, що на екрані знаходиться лише один слайд, який при перемиканні поступово переходить у наступний. Ефект ґрунтується на принципі плавного збільшення прозорості. Тобто вибирається певний часовий відрізок, на протязі якого прозорість першого слайду змінюється від 0% до 100%, за рахунок чого стає видно наступний слайд. Скрипт такого слайдера виглядатиме так$(".fade" ) . slick(( infinite: true , speed: 400 , fade: true , cssEase: "linear" ) ) ;
Slick є найбільш універсальним та простим у використанні слайдером на сьогоднішній день. Широкий інтервал налаштувань слайдера охоплює безліч рішень реалізації слайдерів, що є, напевно, найвагомішою перевагою цього слайдера. Налаштування slick slider- аccessibility – початкове значення цього параметра встановлено як true, він відповідає за підключення навігаційних кнопок для слайдера – це стрілки вперед і назад, і навіть кнопки як точок.
- adaptiveHeight – застосовується тільки до одиночного слайдера, у якого зміняться висота батьківського контейнера залежно від висоти слайдера. У початкових умовах налаштування не підключено.
- autoplay – налаштовує перегортання слайдів в автоматичному режимі без втручання користувача. Стандартне значення цього параметра відповідає false.
- autoplaySpeed – цей параметр є допоміжним для autoplay і встановлює проміжок часу, після якого буде здійснено автоматичне перегортання слайда. Спочатку для нього прописано значення 3000 мілісекунд.
- arrows – підключає до слайдера стрілки вперед та назад. За допомогою таблиці зовнішніх стилів можна змінювати положення та зовнішній вигляд цих стрілок.
- asNavFor – встановлює навігаційний зв'язок між двома слайдерами за допомогою ідентифікатора чи класу. У початкових умовах параметр відповідає нульовому значенню.
- prevArrow – дозволяє змінити зовнішній вигляд стандартної навігаційної стрілки, що відгортає попередній слайд.
- nextArrow – аналогічний до функцій попереднього параметра, але відповідає за стрілку, що перемикає слайд вперед.
- centerMode – фіксує поточний слайд центром батьківського контейнера, спочатку параметр вимкнений.
- centerPadding – при увімкненому центральному режимі показу поточного слайду (попередній параметр) встановлює для цього слайда внутрішній відступ, що візуально дозволяє збільшувати поточний слайд.
- cssEase - відповідає за анімацію перемикання картинок, може робити її плавною або різкішою. Набуває стандартного значення "ease".
- customPaging – дозволяє вставляти власний шаблон перегляду слайдера.
- dots – підключає точки-перемикачі, за умовчанням перебуває у вимкненому стані.
- draggable - включає можливість перегортання слайдів затисканням мишки. Тобто, якщо навести на слайдер курсор миші, затиснути її і пересунути убік, то слайд переключиться на наступний.
- fade – створює ефект загасання слайда під час перемикання, анімаційний ефект.
- focusOnSelect – фокусує заданий елемент слайдера.
- easing – дозволяє встановити особливий анімаційний режим під час перемикання картинок.
- edgeFriction – вимикає перемикання слайдів на останньому елементі. Спрацьовує лише у тому випадку, якщо слайдер не зациклений.
- infinite – зациклює показ слайдів. Це означає, що при перемиканні останньої картинки слайд-шоу почнеться спочатку.
- initialSlide – визначає картинку, з якої розпочнеться показ слайд-шоу. За умовчанням слайдер для старту вибирає перше зображення зображення.
- lazyLoad – дозволяє встановити режим підвантаження наступних слайдів. Доступно лише 2 значення для налаштування: "ondemand" та "progressive", причому останнє є значенням за замовчуванням.
- pauseOnHover – зупиняє перегортання слайдів при наведенні курсору миші на тіло слайдера. Працює лише якщо визначено автоматичне перемикання слайдів.
- pauseOnDotsHover - зупиняє перегортання слайдів при наведенні курсору миші на точкові перемикачі. Працює лише якщо визначено автоматичне перемикання слайдів.
- respondTo – викликає реакцію зміни ширини вікна браузера. Доступні три значення: "window", "slider" або "min".
- responsive – дозволяє адаптувати налаштування слайдера під ширину екрана. Відрізняється від попереднього налаштування тим, що обмеження ширини визначається точним значенням у пікселях. Використовується для адаптивної верстки під мобільні пристрої.
- slidesToShow – дозволяє встановити кількість картинок, що виводяться у видимій зоні. Спочатку показується один слайд, але цим значенням можна варіювати.
- slidesToScroll – повідомляє слайдеру скільки потрібно змінити картинок при перемиканні.
- speed – фіксує швидкість, з якою здійснюватиметься перемикання слайдів.
- variableWidth – адаптує ширину контейнерів слайдера під ширину кожної картинки, що показується.
Доповнюю.
1. Завантажуємо репозиторій тут https://github.com/kenwheeler/slick
2. У файлі index.html перед тим, що відкриває, підключаємо стилі слайдера:
Перед закриваючим підключаємо скрипти
Ще цей слайдер потребує шрифтів. Папку fonts із папки слайдера потрібно помістити в папку css проекту.
І ще в папці слайдера потрібно знайти малюнок ajax-loader.gif та у файлі slick-theme.css прописати шлях до нього
3. Тепер диву-обертці слайдера присвоюємо клас, наприклад, multiple-items
А у файлі script.js пишемо код
$(document).ready(function()(
$(".multiple-items").slick((
autoplay: false,
autoplaySpeed: 6000,
arrows: true,
infinite: true,
dots: true,
CenterMode: true,
slidesToShow: 3,
slidesToScroll: 1
});
});
4. Слайдер уже працює. Ось тільки стрілок не видно, тому що вони за межами слайдера, а ширина слайдера у мене на весь екран. Стрілки шукаємо у файлі slick-theme.css і міняємо відступи, так щоб стрілки залишалися всередині слайдера, а не зовні.
5. Добре. Тепер, на мою думку, центральний слайд слайдера повинен відрізнятися від бічних.
пишуть, що достатньо прописати у коді
$(".middle").slick((
CenterMode: true,
//Центруємо поточний слайд
centerPadding: "50px",
// трохи збільшуємо поточний слайд
slidesToShow: 3
//виводимо 3 слайди для перегляду
});
Щоб збільшити розмір центрального слайдера. Насправді такий спосіб не працює
Збільшила центральний слайд стилем
.slick-center (
background-color: #8cc63f;
transform: scale(1.3);
}
Привіт усім і сьогодні я розповім про дуже класний, а головне простий слайдер – slick.
Зайдіть на сайт http://kenwheeler.github.io/slick/Там ви зможете знайти дуже багато прикладів роботи слайдера slick. У даного слайдера правда дуже багато різних ефектів і, також, є прокручування мишкою. Тобто. ви можете натиснути на якийсь елемент у слайдері лівою кнопкою мишки і, утримуючи її, перемотати слайдер ліворуч або праворуч. Ця функція не зовсім корисна для комп'ютерів, але на смартфонах і планшетах – саме те!
Отже, щоб його підключити, завантажте файли із сайту, даного вище. Тепер створимо html і підключимо необхідні компоненти, зокрема jquery, т.к. слайдер використовує цю бібліотеку для своєї роботи.
your content
your content
your content
Підключіть стилі
І підключіть скрипти
Щоб ініціалізувати слайдер, у тегу script пропишіть таке:
$(".your-class").slick((
setting-name: setting-value
});
});
Зрештою ваш html файл буде виглядати приблизно так:
Slick
your content
your content
your content
$(document).ready(function()(
$(".your-class").slick((
setting-name: setting-value
});
});
Цей слайдер має чимало установок, які ви можете задати самі. Знайти їх усі ви можете все на тому самому сайті внизу сторінки в табличці. Задавати їх варто за ініціалізації в об'єкті.
$(document).ready(function()( $(".your-class").slick(( autoplay: true; )); ));
У цьому прикладі ми вказали, що варто автоматично перегортати слайди.
Отже, як ви можете бачити, слайдер дуже простий в установці та налаштуванні, але дозволяє робити шикарні речі. Дякую за увагу і до швидкого!
slick - комплексне рішення щодо створення функціоналу каруселі, у різних її проявах. Демо і типові варіанти, і вихідники можна переглянути/завантажити.
Відсікаємо зайвеУ базовій комплектації у slick є кілька скриптів, кілька стилів, власний шрифт. Я використовую усічену версію:
- slick.min.js (мінімізований)
- slick.css (+ можна почистити стилі)
- slick-theme.css (+ можна почистити стилі)
Стилі, за бажання можна поєднати в один.
Посилання на шрифт slick я заміняю на більш зручний FontAwesome
Основний функціонал каруселі задає div class="multiple-items". div class="carousel" потрібен тільки для завдання відступів від каруселі.
Скрипт ініціалізації скрипту
$(document).ready(function() ( $(".multiple-items").slick(( //infinite: true, //прокручування по колу autoplay: true, slidesToShow: 3, slidesToScroll: 3 )); ) );
Slick-slider (width: 100%; float: left;) .slick-slide (cursor: pointer;) .multiple-items .slick-slide (margin: 0 15px;) .carousel (padding: 0 3%; float: left;width:100%;box-sizing:border-box;) /* для товарів woocommerce */ .carousel .woocommerce ul.products li.product (margin: 1em 0 1.992em 0; width: 100%;)
Карусель для товарів woocommerce
Трохи спростив виведення товарів для каруселі (! Не універсальне рішення, у різних варіантах верстки може відображатися по-різному):
При завантаженні скриптів каруселі відбуваються перекоси у верстці. Створимо початкові стилі, які триматимуть карусель у рамках поточної верстки:
Multiple-items (display: flex !important; flex-wrap: wrap; margin-bottom: 25px;) .multiple-items img ( -moz-backface-visibility: visible; -webkit-backface-visibility: visible; backface-visibility : visible; ) .slick-list (margin: 0 -1px 0 0 !important; padding: 0 1px 0 0 !important; width: 100%;) .slick-track (border: solid #e9eaec; border-width: 0 0 0 1px; display: flex !important; padding-bottom: .1rem;) .carousel .product ( border: solid #e9eaec; border-width: 1px 1px 1px 0; background: #fff; : none, text-align: center; position: relative; margin-bottom: -.1rem; height: auto; ) .multiple-items > .product (width: 25%;
Властивості backface для зображень вказав, т.к. якщо залишити hidden то при перемотуванні вони приховую лейбли.
Адаптивність каруселіСкрипт можна настроювати під різні роздільні здатності екрана. Для цього в налаштуваннях прописуємо параметри responsive
Responsive: [ ( breakpoint: 1280, settings: ( slidesToShow: 4, slidesToScroll: 4, ) ), ( breakpoint: 1024, settings: ( slidesToShow: 3, slidesToScroll: 3, ) ) ( ( breakpoint: : 2, slidesToScroll: 2 ) ), ( breakpoint: 480, settings: ( slidesToShow: 1, slidesToScroll: 1 ) ) ]
Або зовсім відключити за певної роздільної здатності - settings: «unslick»
Slick слайдерОстаннім часом основний слайдер роблю також на основі slick. Є невелика проблема - при завантаженні сторінки на якісь частки секунд виводяться всі слайди, а потім складаються. Це я замаскував так:
Робимо все, крім одного слайду невидимими:
Slick-track > div:nth-child(2) img (display: block !important;) #index-slider img (display: none;)
А при завантаженні сторінки вмикаємо й інші:
JQuery(document).ready(function()( jQuery("#index-slider img").css("display", "block"); ));
Підвантаження слайдів
Slick має ще одну корисну функцію lazyload (). Потрібно тільки додати до скрипта властивість lazyLoad: 'ondemand' . І змінити висновок зображення:
або ще можна спростити так:
">
А щоб слайди навпаки завантажувалися спочатку потрібно прописувати властивість lazyLoad: 'progressive'
Штатне підвантаження зображень працює не цілком коректно, рекомендую використовувати у зв'язці з lazyload.
Мобільна версія слайдера
Можна збільшити у моб. версії висоту слайдера, при цьому обріжуться краї у зображень, але картинка буде більше:
@media screen and (max-device-width: 480px) ( #index-slider, .hotel-photos (height: 200px;) .slick-list, .slick-track (height: 100%;) #index-slider img , .hotel-photos img (height: 100%; object-fit: cover;) )
object-fit: cover; - класна властивість CSS 3, підтримується більшістю браузерів
Галерея SlickНещодавно на одному із сайтів звернув увагу на цікаве використання Slick у вигляді галереї. Особливість у тому, що зображення галереї сягають країв екрана (верста сайту на весь екран).
Для реалізації необхідно помістити слайдер (#index-slider) у контейнер (.s2) і прописати такі стилі:
S2 (overflow: hidden; display: block;) #index-slider (max-width: 1000px; margin: 0 auto;) .s2 .slick-list (overflow: visible;) #index-slider .slick-slide img ( max-width: 800px; margin: 0 auto;)
або ще простіше:
Щоб зробити таку галерею достатньо прописати 2 стилі:
#index-slider (max-width: 1280px; margin: 0 auto;) #index-slider .slick-list (overflow: visible;)
Ноутбуки
