Slick параметри. Адаптивні jQuery слайдери для landing page. Приклади застосування різних конфігурацій слайдера Slick

Привіт друзі. Сьогодні поговоримо про адаптивних jQuery слайдерах, які допоможуть прикрасити ваш landing page, Грамотно структурувати інформацію і лаконічно подати її.

Колись я проводив опитування в соціальних мережах і просив запропонувати який-небудь стоїть скрипт слайдера, яким ви користуєтеся самі. Особливого успіху пост не набрав, але мені порадили відмінний інструмент, Який сьогодні і буде на першому місці. За що - велике спасибі. Може бути, після цієї статті хтось порадить ще більш якісний скрипт.

ТОП скриптів, що реалізують слайдер на сайті

Так як всі представлені нижче скрипти є jQuery плагінами, то вони легко вбудовуються як на звичайні html сайти, так і на будь-які CMS і багато.

Owl Carousel 2

На мій погляд Owl Carousel 2 - кращий jQuery слайдер з безкоштовних. Маса налаштувань, наявність API і можливість повної кастомізації. Все це закохала в себе з першого погляду. Відмінно реагує на смартфонах і планшетах, підтримує перегортання Swip (ом) і багато іншого.

Slick slider

На друге місце, зараз, я б поставив Slick slider. Досить цікавий варіант, яким я користувався деякий час. Для завдань landing page мене цілком влаштовував. Оформити коментарі, логотипи брендів і партнерів, з усім цим цей слайдер справлявся на ура. Є можливість користуватися методами і подіями, а також виводити слайдер в декількох місцях на сторінці.

Sudo slider

Крім іншого, слайдер підтримує перегортання шляхом перетягування елементів на сенсорному дисплеї, що безсумнівно порадує відвідувачів вашого сайту, що використовують смартфон або планшет.

Отже, слайдер має назву slick.js.. Для підключення слайдера на сайті, вставте код в head вашого сайту наступні рядки:

От і все! Слайдер готовий до роботи. Тепер все, що вам залишається, це підключити його до необхідних елементів. Пишемо html:

і підключаємо до нього слайдер (Цей код краще розмістити в секції head):

Після таких нескладних маніпуляцій ваш слайдер slick почне працювати з настройками за замовчуванням.

замість СОДЕРЖМОЕ 1, СОДЕРЖМОЕ 2 та інших ви можете розмістити будь-який контент - картинки, закголовкі, параграфи та інше. Наприклад, для інтернет магазина можна зробити ротатор товару:

Можна додати необмежену кількість елементів в ротатор.

Також слайдер підтримує безліч налаштувань - кількість відображуваних елементів, кількість прокручуваних елементів, вертикальний або горизонтальний слайдер, швидкість прокрутки та інше.

Також можна налаштувати кількість відображуваних елементів для різних дозволів дисплеїв:

$ (Document) .ready (function () ($ ( ". Product-slider"). Slick ((responsive: [(breakpoint: 1024, // для дисплеїв до 1024px і більш settings: (slidesToShow: 3, // кількість відображуваних елементів 3 slidesToScroll: 3, // кількість прокручуваних елементів за раз 3 dots: true // відображати точки (за кількістю елементів))), (breakpoint: 600, // для дисплеї менш 600px settings: (slidesToShow: 2, // кількість відображуваних елементів 2 slidesToScroll: 2 // кількість прокручуваних елементів за раз 2)), (breakpoint: 480, // для дисплеї менш 480px settings: (slidesToShow: 1, // кількість прокручуваних елементів за раз 1 slidesToScroll: 1 // кількість прокручуваних елементів за раз 1))]));));

З більш докладними настройками можна ознайомитися на

slick - комплексне рішення по створенню функціоналу каруселі, в різних її проявах. Демо і типові варіанти, і вихідні можна подивитися / завантажити.

відсікаємо зайве

У базовій комплектації у slick присутні кілька скриптів, кілька стилів, власний шрифт. Я використовую усічену версію:

• slick.min.js (мінімізований)
• slick.css (+ можна почистити стилі)
• slick-theme.css (+ можна почистити стилі)

Стилі, при бажанні можна об'єднати в один.
Посилання на шрифт slick я заміняю на більш зручний FontAwesome

Базова карусель

Основний функціонал каруселі задає div class \u003d "multiple-items». div class \u003d "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; padding: 15px; list-style : none; text-align: center; position: relative; margin-bottom: -.1rem; height: auto;) .multiple-items\u003e .product (width: 25%;)

Властивості backface для зображень вказав, тому що якщо залишити hidden то при перемотуванні вони приховую лейбли.

адаптивність каруселі

Скрипт можна налаштовувати під різні дозволи екрану. Для цього в настройках прописуємо параметри responsive

Responsive: [(breakpoint: 1280, settings: (slidesToShow: 4, slidesToScroll: 4,)), (breakpoint: 1024, settings: (slidesToShow: 3, slidesToScroll: 3,)), (breakpoint: 800, settings: (slidesToShow : 2, slidesToScroll: 2)), (breakpoint: 480, settings: (slidesToShow: 1, slidesToScroll: 1))]

Або зовсім відключити при певному вирішенні - settings: «unslick»

Slick слайдер

Останнім часом основний слайдер також роблю на основі slick. Є невелика проблема - при завантаженні сторінки на якісь частки секунд виводяться всі слайди, а після складаються. Це я замаскував так:

Робимо все, крім одного слайда невидимими:

Slick-track\u003e 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'. І змінити виведення зображення:

або ще можна спростити так:

ID), "full"); ?\u003e

А щоб слайди навпаки завантажувалися спочатку потрібно прописувати властивість 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;)

Скрипт слайдера ми завантажили в минулому уроці командою

$ 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 і підключити звідти. Якщо залишити їх на місці, і в стилі слайдера вносити зміни, то при оновленні скрипта всі ці зміни будуть втрачені.

На відміну від інших слайдерів, кадри розміщуються не в списку, а в блоках:

Виклик без параметрів

При визвове плагіна без параметрів отримуємо простий варіант з одним слайдом на сторінці і навігаційні стрілки.

$ ( ".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 - дозволяє встановити кількість картинок, виведених у видимій зоні. Спочатку показується 1 слайд, але цим значенням можна варіювати.
• slidesToScroll - повідомляє слайдеру скільки потрібно поміняти картинок при перемиканні.
• speed - фіксує швидкість, з якою буде здійснюватися перемикання слайдів.
• variableWidth - адаптує ширину контейнерів слайдера під ширину кожної показується картинки.

UPD:Спробувала створити слайдер з цього уроку і виявилося, що він дуже неповний.
Доповнюю.

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);
}

Display multiple slick image slider and carousel using shortcode with category. Fully responsive, Swipe enabled, Desktop mouse dragging and Infinite looping. Fully accessible with arrow key navigation Autoplay, dots, arrows etc.

It uses A custom post type and taxonomy to create a slider, with almost unlimited options and support for multiple sliders on any page. You can also display image slider on your website header.

We have added 5 designs for slider and 1 design for carousel. You can find all designs on our demo website. Just copy the shortcode of design that you like and use.

Журнал змін

1.8 (08, August 2019)

• [*] Update demo links
• [*] Fixed some small-small issues.
• [*] Updated text under featred image ie Add slider image.

1.7.1 (31, May 2019)

• [+] Added new shortcode parameter ie image_fit \u003d "true". image_fit parameter is used to specify how an image should be resized to fit its container. By default value is «true». Options are «true OR false». NOTE: NOTE: image_fit \u003d "true" work better if sliderheight is given. if image_fit \u003d "false", no need to use sliderheight parameter.
• [*] Image_fit parameter work with both the shortcode.
• [+] Added new shortcode parameter ie image_size \u003d "full» for shortcode (Default is «full», values \u200b\u200bare thumbnail, medium, medium_large, large, full)
• [-] Removed default height 400 from sliderheight parameter.
• [-] Remove object-fit CSS property from img under CSS if image_fit \u003d "false".

1.6.2 (12, Feb 2019)

• [*] Minor change in Opt-in flow.

1.6.1 (26, Dec 2018)

• [*] Update Opt-in flow.

1.6 (06, Dec 2018)

• [*] Tested with WordPress 5.0 and Gutenberg.
• [*] Fixed slider height issues with some designs.
• [*] Taken better security with esc_url and esc_html.
• [*] Fixed some CSS issues.

1.5.1 (05, June 2018)

• [*] Follow some WordPress Detailed Plugin Guidelines.

1.5 (10/3/2018)

• [*] Fixed some css issues related to slider arrow.

1.4 (10/3/2018)

• [*] Fixed some css issues

1.3.4 (04/10/2017)

1.3.3 (04/10/2017)

• [*] Updated slick.min.js to the latest version
• [*] Fixed all responsive issues and checked many mobile devices.
• [*] If you are using any cache plugin, please clear your cacheing after plugin updates

1.3.2.1 (27/09/2017)

• [*] Fixed design-6 issue with shortcode parameter variablewidth \u003d "true" in responsive layout
• [*] If you are using any cache plugin, please clear your cacheing after plugin updates

1.3.2 (23/09/2017)

• [*] Fixed design-6 issue with shortcode parameter variablewidth \u003d "true"
• [*] If you are using any cache plugin, please clear your cacheing after plugin updates

1.3.1.1 (23/09/2017)

• [*] Fix responsive issue reported by users in v-1.3.1
• [*] If you are using any cache plugin, please clear your cacheing after plugin updates

1.3.1 (22/09/2017)

• [*] Fix main JS wp_register_script issue

1.3 (22/09/2017)

• [+] Added sliderheight parameter in shortcode
• [*] RTL made better to work with RTL websites
• [*] Center mode and variablewidth improved better as per usres feedback
• [*] sliderheight parameter improved

1.2.8 (22/05/2017)

• [+] RTL Supported

1.2.7 (25/04/2017)

• [+] Added overlay for design-2

1.2.6 (07/11/2016)

• [+] Added «How it work tab»
• [-] Removed Pro design tab

1.2.5 (20/10/2016)

• Updated all the designs and fix the bug
• Fixed image display issue on mobile
• Replaced arrow images

1.2.4

• Updated slider js to latest version.
• Updated plugin design page.

1.2.3

• Fixed some css issues.

1.2.2

• Fixed some css issues.
• Resolved multiple slider jquery conflict issue.

1.2.1

• Fixed some bug
• Added Pro version with 16 designs