Слайдеры для сайта slick, swiper, splide

Слайдер в современное время можно встретить почти на каждом сайте. Он помогает сделать страницу более динамичной, а контент компактнее. Существует достаточно много различных видов слайдеров, но в данной статье мы рассмотрим 2 самых популярных, плюс бонусный, в котором есть два отличия от остальных.

Slick slider

https://kenwheeler.github.io/slick/ - Первый по популярности для меня является Slick slider. Именно этот слайдер я впервые использовал на сайте.

У него очень много всевозможных настроек, таких как: автоматическое подстраивание под высоту слайда; центрирование слайда; поддержка адаптива, то есть необходимо в настройках просто указать значения ширины экрана при которых будет выполняться указанный вами код; ленивая загрузка картинок; поддержка фильтра слайдов; автоматическое перелистывание слайдов; поддержка анимации переходов между слайдами.

Так же у slick слайдера есть режим который позволяет соединить между собой два слайдера и использовать первый как основной, а второй для навигации(на скриншоте большой слайдер является основным, а под ним навигационный).

Ознакомится со всеми настройками слайдера можно в официальной документации https://github.com/kenwheeler/slick/

Swiper слайдер

https://swiperjs.com – Следующий на очереди Swiper. Данный слайдер по функциональности ничем не уступает предыдущему и имеет свои интересные особенности.

Среди функциональных особенностей которые присутствуют в данном слайдере, но отсутствуют в Slick – слайдере, можно выделить следующие: наличие прогресс бара, скролл бара; freemode (https://swiperjs.com/demos#freemode) – который позволяет свободно прокручивать слайды без рывков; кастомный скролл внутри слайда(https://swiperjs.com/demos#scroll-container); grid сетка (https://swiperjs.com/demos#slides-grid); перелистывание слайдов колесиком мыши. Также как и у Slick слайдера присутствует анимация между переходам, ленивая загрузка картинок, и поддержка адаптива.

Здесь перечислена лишь малая часто того, на что способен данный слайдер.

Более детально со всеми настройками вы сможете ознакомится в документации https://swiperjs.com/swiper-api.

Splide slider

https://splidejs.com – Бонусом будет слайдер под названием Splide.

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

В данном слайдере присутствует тот же набор настроек как и в выше перечисленных, но у него есть две особенности, которые отсутствуют в Slick и Swiper.

Первая особенность заключается в функции, которая повторяет анимацию бегущей строки, только в нашем случае будут бегущие слайды

Вторая особенность – это взаимодействие с WebGl(three.js).

https://splidejs.com/premium. На этой странице вы можете просмотреть варианты анимации.

Благодаря ей, смена слайдов происходит с помощью canvas, а данным эффектом не может похвастаться ни один из упомянутых слайдеров. Правда за такую анимацию нужно будет заплатить. Но если это будет премиум сайт, то данная анимация сделает ваш сайт по настоящему особенным.

Более детально со всеми настройками можно ознакомится в документации https://splidejs.com/documents/

Вот такой получился обзор 3-х слайдеров, а какой именно использовать, решать вам.

Подписывайтесь на новости блога, чтобы не пропускать новые, еще более интересные статьи!

Также подписывайтесь на мой instagram и telegram, там вы сможете найти много полезной информации.