Адаптивні jQuery слайдери на landing page. Адаптивні jQuery слайдери для landing page Slick галерея

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

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

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

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

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

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

$(".your-class").slick((
setting-name: setting-value
});
});

Зрештою ваш htmlфайл буде виглядати приблизно так:

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

$(document).ready(function()( $(".your-class").slick(( autoplay: true; )); ));

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

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

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

Отже, слайдер має назву 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)))));));

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

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

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

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

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

Owl Carousel 2

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

Slick slider

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

Sudo slider

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.

Це використовується як персоналізований тип типу, так і taxonomy для створення літератури, з майже необмеженими опціями і support for multiple sliders на будь-якій сторінці. Ви можете також відтворити зображення плеєра на вашому веб-сайті.

Ми маємо розширені 5 дизайнів для slider і 1 дизайн для каруселів. Ви можете зробити всі дизайни на нашому веб-сайті. 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="true". image_fit parameter використовується як specify how an image should be resized to fit its container. By default value is "true". Options є "true OR false". NOTE: NOTE: image_fit="true" work better if sliderheight is given. if image_fit="false", не потрібний для використання фокусника значення.
• [*] image_fit parameter work with both the shortcode.
• [+] Added new shortcode parameter ie image_size="full" для shortcode (Показано, що "full", значення є 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="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 та 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.
• [*] Якщо ви користуєтесь будь-яким архівом plugin, please clear your cacheing after plugin updates

1.3.2.1 (27/09/2017)

• [*] Fixed design-6 issue with shortcode parameter variablewidth="true" in responsive layout
• [*] Якщо ви користуєтесь будь-яким архівом plugin, please clear your cacheing after plugin updates

1.3.2 (23/09/2017)

• [*] Fixed design-6 issue with shortcode parameter variablewidth=»true»
• [*] Якщо ви користуєтесь будь-яким архівом 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
• [*] Якщо ви користуєтесь будь-яким архівом 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 parametr 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)

• [+] Додано «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 до останньої версії.
• 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

У статті наведено огляд установки та роботи слайдера slick. Розглянуто можливі варіанти реалізації слайдера, особливості перемикання слайдів та спосіб виведення.

Досить часто на різних інтернет ресурсах можна зустріти такий функціональний прийом, як слайдер. Слайдером є кілька довільних картинок, які повідомляють відвідувачу про можливі напрямки, у яких працює фірма. Перемикання слайдера може бути встановлене в автоматичному режимі, тобто після закінчення певного проміжку часу слайди переміщуються самостійно. Також варто зазначити, що у видимій зоні можуть бути кілька слайдів. Причому їх вмістом може бути не тільки картинка, а й посилання, форма зворотного зв'язку або будь-який інший функціональний прийом.

Існує досить багато різновидів слайдера та способів його реалізації. У цій статті ми розглянемо роботу слайдера slick. Це найбільш поширений та універсальний слайдер, також варто відзначити простоту його експлуатації.

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

Полі того, як був скачаний архів зі слайдером – витягуємо папку в директорію нашого сайту. Якщо ви переглянете файли слайдера, побачите, що плагін має свої таблиці стилів. Відповідно, для того щоб вони підключилися необхідно записати певний код в зону тега head. Виглядати це буде приблизно так

< link rel= "stylesheet" type= "text/css" href= "slick/slick.css" /> < link rel= "stylesheet" type= "text/css" href= "slick/slick-theme.css" />

Процес підключення стилів нічим не відрізняється від звичайного підключення CSS. Після цього потрібно підключити бібліотеки слайдера. Вони зазвичай підключаються до окремого файлу, в якому вказані всі посилання на файли js-коду. Якщо такого файлу у вас немає, код потрібно вставити всередині тега body, а саме до його закриття. Ось так виглядає цей код

< script type= "text/javascript" src= "//code.jquery.com/jquery-1.11.0.min.js"> < script type= "text/javascript" src= "//code.jquery.com/jquery-migrate-1.2.1.min.js"> < script type= "text/javascript" src= "slick/slick.min.js" >

Після цього можна розпочинати формування HTML-тіла нашого слайдера. Тут хочу відзначити одну з особливостей slick. Більшість слайдерів будуються за допомогою списків, що є слайдами. Розглянутий плагін працює не зі списками, а з блоковими елементами. Це важливо, оскільки якщо слайди будуть поміщені в список, то код не буде працювати. HTML-код слайдера slick має виглядати приблизно так

< div class = "slick-slider" > < div>Слайд1 < div>Слайд2 < div>Слайд3

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

$(Document) . ready(function () ( $( ".slick-slider).slick(( setting-name: setting-value )); ));

Цей скрипт вставляється в окремий файл, де зібрані всі скрипти, що працюють на сайті або після HTML-тіла слайдера в рамках тега script .

Приклади застосування різних конфігурацій слайдера Slick

Перший і найпростіший різновид плагіна, що вивчається, - одиночне уявлення слайдів. В цьому випадку у нас буде виводитись один слайд на всю ширину екрана. При перемиканні по стрілках змінюватиметься теж один слайд. Щоб реалізувати таке рішення, необхідно в скрипт-активатор вставити наступний код

$(".single-slide" ) . slick();

Чисто візуально такий слайдер виглядатиме приблизно так

Не складно здогадатися, що якщо існує одиночний варіант слайдера, паралельно з цим можна реалізувати і множинний. Іншими словами, на екрані виводяться відразу кілька слайдів, причому можна зробити так, щоб перемикалися слайди або по одному, або по кілька, або відразу все. Організовується такий слайдер через наступний скрипт

$(".multiple-slide"). slick(( infinite: true , slidesToShow: 3 , //кількість слайдів, що виводяться на екрані slidesToScroll: 2 //кількість слайдів, які перегортаються за один раз } ) ;

На практиці це матиме такий вигляд

Не зациклений слайдер

Насправді більшість слайдерів зациклені. Простіше кажучи, після того, як було показано останній слайд, здійснюється перемикання на початок списку і слайдер працює заново. Існує рішення, завдяки якому можна зробити слайдер без циклу. Тобто, далі останнього слайду перемикання не буде відбуватися, так само, як і в зворотному напрямку, перед першим зображенням нічого не відображатиметься. Дивимося та запам'ятовуємо комбінацію коду, яка підключає такий слайдер

SlidesToShow: 4, slidesToScroll: 2,));

А у браузері отримаємо приблизно таку картину

Примітка

Хочу відзначити, що для такого типу слайдера можна настроїти адаптивний висновок певної кількості слайдів, залежно від значення ширини екрана. Наприклад, Вам необхідно, щоб при ширині екрана менше 600 пікселів виводилося лише 2 слайди, а перемикалися вони по одному. Вирішення даного завдання буде виглядати так

$(".uncycle" ) . slick(( infinite: false , speed: 350 , // Визначаємо швидкість перегортання slidesToShow: 4 , //кількість слайдів для показу slidesToScroll: 2 , //скільки слайдів за раз перегорнеться responsive: [ ( breakpoint: 600 , //повідомляє, за якої ширини екрана потрібно включати налаштування settings: ( slidesToShow: 2 , slidesToScroll: 1 , infinite: true , ) ) ) ) ) ;

Змінна ширина та висота слайдів

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

$(".var-width" ) . slick(( infinite: true , speed: 250 , // Визначаємо швидкість перегортання slidesToShow: 1 , //кількість слайдів для показу centerMode: true , //Поточний слайд по центру variableWidth: true //Встановимо змінну ширину } ) ;

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

adaptiveHeight: true

Настроювання слайдера за допомогою атрибута

Для версії Slick 1.5 стало можливим доповнення параметрів слайдера через код HTML за допомогою атрибута data-slick. Зазначений атрибут був спеціально розроблений для виключення використання js-коду в документі HTML. Нижче наведено приклад використання атрибуту

< div class = "slick-slider" data- slick= "("slidesToShow": 3, "slidesToScroll": 1)"> < div>Слайд1 < div>Слайд2 < div>Слайд3

Візуальний ефект нічим не відрізнятиметься від тих випадків, коли ми використовуємо js-код усередині тега script.

Виводимо поточний слайдер у центр екрану

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

$(".middle" ) . slick(( centerMode: true , //центруємо поточний слайд centerPadding: "50px" , //трохи збільшуємо поточний слайд slidesToShow: 3 //виводимо 3 слайди для перегляду } ) ;

У результаті отримаємо щось у цьому роді

Плавне перемикання

В стандартному станіслайдер здійснює різку заміну слайдів. Але функціонал Slick передбачає плавний режим заміни слайдів. Для цього потрібно вдатися до атрибуту data-lazy, в якому прописується шлях до зображення. Атрибут потрібно привласнити не обгортці, а саме тегу зображення. Це дозволить уникнути використання js-коду. Альтернативою буде ця команда

lazyLoad: "ondemand"

атрибут слід записувати так

< img data- lazy = " images/slaid.jpg" >

Плавне перемикання без переміщення

Особливість такого слайдера полягає в тому, що на екрані знаходиться лише один слайд, який при перемиканні поступово переходить до наступного. Ефект ґрунтується на принципі плавного збільшення прозорості. Тобто вибирається певний часовий відрізок, на протязі якого прозорість першого слайда змінюється від 0% до 100%, за рахунок чого стає видно наступний слайд. Скрипт такого слайдера виглядатиме так

$(".fade" ) . slick(( infinite: true , speed: 400 , fade: true , cssEase: "linear" ) ) ;

Слайдер, що синхронізується

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

$(".main" ) . slick(( slidesToShow: 1 , slidesToScroll: 1 , arrows: false , fade: true , asNavFor: ".slider-nav" ) ) ; $( ".second).slick(( slidesToShow: 3, slidesToScroll: 1, asNavFor: ". slider-for ", dots: true, centerMode: true, focusOnSelect: true ));

Ось так він виглядатиме на вашому екрані

Налаштування

Як ви вже могли помітити, провідну роль у слайдері грає скрипт-активатор. Він прив'язує весь функціонал слайдера до конкретного блоку з картинками чи іншою інформацією. І в залежності від того, які команди прописані в цьому скрипті, існують різноманітні види слайдерів Slick із різними функціональними можливостями. Нижче буде представлений список цих команд з описом кожної. Це буде для Вас гарною шпаргалкою, якщо Ви ще погано знайомі з цим слайдером.

• а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– адаптує ширину контейнерів слайдера під ширину кожної картинки.

Підводячи підсумок

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