Заказать проект
Оставьте заявку для получения коммерческого предложения.
Заполните форму и мы вышлем Вам предложение в котором решим,
чем можем вам помочь.
Слайдер решает всё

Слайдер решает всё

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 минут
laptop
Мы свяжемся с вами в течении 10 минут