Слайдер вирішує все

21 Вересня 2018

наступна стаття
Олександр Сідлецький

Front End Developer

Олександр Сідлецький
Слайдер вирішує все

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

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

Отже, це Slick. І це не реклама, оскільки бібліотека знаходиться у вільному доступі і не передбачає будь-яких платежів. Особисто для мене ця технологія виявилася зручною і практичною. Слайдер легко конфігурувати і стилізувати під будь-яке бажання замовника в цій сфері. У самій бібліотеці вже закладено широкий функціонал, в якому нескладно розібратися, а також доступна інформативна документація.

Далі, спираючись на приклади, я просто буду приводити аргументи на користь саме цього слайдера. Бібліотеку легко підключити до сайту, навіть якщо ви використовуєте іншу «карусель» — переконфігурувати Slick не складе труднощів. Достатньо підключити бібліотеку на потрібній сторінці сайту і форматувати слайдер:

Розмітка (html):

{...slide content...}
{....slide content...}
{...slide content...}

Ініціалізація (script):

$(document).ready(function(){
	$('.my_slider').slick();
});

Цього вже достатньо, щоб оцінити роботу слайдера. Якщо не вказувати жодних налаштувань,за замовчуванням на сторінці буде видно тільки один слайд, який займе всю ширину сторінки:

Скріншот з офіційної документації

Якщо потрібно розмістити кілька слайдів, досить просто при ініціалізації зазначити таку властивість і потрібну кількість слайдів (наприклад, три зображення): "slidesToShow: 3".

Властивості "infinite: true" і "slidesToScroll: 3" на скріншоті нижче відповідають за «нескінченність» слайдера і кількість слайдів, які прокрутиться за один раз відповідно.

Скріншот з офіційної документації

Також часто може знадобитися автопрокрутка слайдера. Щоб це реалізувати, теж не буде потрібно докладати особливих зусиль. Досить буде вказати ще 2 властивості:

"autoplay: true" — для дозволу автопрокрутки

"autoplaySpeed: X" (де Х - швидкість прокрутки слайдів в мілісекундах) — для частоти зміни слайдів.

Скріншот з офіційної документації

Природно, для зміни візуального відображення потрібна окрема стилізація. Але всю інформацію про потрібний функціонал можна знайти в офіційній документації Slick-слайдер.

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

Також буває корисною можливість показу тільки певних слайдів з вибірки — сортування. Так! Прямо в слайдері!

Мало не забув: дуже цікавою мені здалася можливість створювати галерею з двох слайдерів, які будуть залежати один від одного:

Скріншот з офіційної документації

І ще одна ДУЖЕ корисна функція. Прямо в налаштуваннях слайдера можна зробити його адаптивним для коректного відображення на будь-яких пристроях. Для цього потрібно вказати, що слайдер буде адаптивним і задати брейк-поінти:

Скріншот з офіційної документації

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

Підсумую: з того моменту як я почав використовувати Slick, інших мені не треба. Моя думка, звичайно, суб'єктивна, але підтримується і багатьма розробниками. Наполегливо рекомендую!


Схожі статті

Записатись на консультацію

Ми зв'яжемось з Вами протягом 10 хвилин