Для создания современных сайтов разработчики все чаще стали пользоваться реактивными фреймворками или чистым JavaScript, отказываясь при этом от библиотеки jQuery. Однако остаются плагины, от которых не так просто отказаться. К таким относится Slick slider. Он очень удобен в использовании и сочетает в себе все необходимые для создания каруселей опции. Сегодня хочу рассказать о слайдере Snake, который очень похож на Slick по своей функциональности, но не имеет сторонних зависимостей и, соответственно, не требует подключения jQuery. Мы поговорим о том, какие у слайдера есть плюсы и минусы, рассмотрим, как им пользоваться, а также познакомимся с опциями Snake.
Для тех, кто не хочет читать вест текст, оговорюсь, что полный список настроек, демо и ссылка на код на GitHub есть в конце статьи.
Плюсы и минусы Snake
Итак, из достоинств Snakeстоит отметить следующие:
-
Как уже было сказано, карусель написана на чистом JS и не имеет сторонних зависимостей.
-
Уже знакомый функционал: опции называются так же, как у Slick.
-
Реализована основная функциональность Slick: адаптивность, отдельные настройки под каждый брейкпоинт, бесконечная прокрутка, навигация и возможность синхронизации слайдеров.
-
Лаконичный код инициализации: создавая инстанс Snake, передаем селектор по аналогии с плагинами jQuery.
-
Простое подключение — добавляем стили и скрипт, и карусель готова к работе.
-
Сайт слайдера визуально похож на сайт Slick, там будет комфортно ориентироваться.
Что касается недостатков,
-
в Snake реализованы не все возможности Slick, а лишь основные.
-
Нет подробной документации.
Последнюю проблему мы постараемся решить, рассмотрев опции Snake в этой статье.
Начало работы со слайдером
А сейчас давайте посмотрим, как начать работу со слайдером. Для этого необходимо скачать код Snake по ссылке и перенести папку snake в ваш проект. После этого в тэге head подключаем стили и js-файл.
<link rel="stylesheet" href="snake/snake.css"> <link rel="stylesheet" href="snake/snake-theme.css"> <script src="snake/snake.js"></script>Затем прописываем HTML-разметку карусели:
<div class="some-class"> <div>slide 1</div> <div>slide 2</div> <div>slide 3</div> </div>И в файле script.js инициализируем Snake:
new Snake('.some-class');В целом должно получиться следующее.
Файл index.html
<html> <head> <title>Page Title</title> <link rel="stylesheet" type="text/css" href="snake/snake.css"> <link rel="stylesheet" type="text/css" href="snake/snake-theme.css"> <script src="snake/snake.js" type="text/javascript"></script> <script src="script.js" type="text/javascript"></script> </head> <body> <div class="some-class"> <div>slide 1</div> <div>slide 2</div> <div>slide 3</div> </div> </body> </html>Файл script.js
window.addEventListener('load', () => { new Snake('.some-class'); });Настройка Snake
А теперь давайте попробуем создать адаптивную карусель с помощью Snake. Передадим при инициализации слайдера объект с настройками в формате {option: value, option: value}. Добавим несколько слайдов в HTML:
new Snake('.some-class', { mobileFirst: true, swipe: true, speed: 300, dots: true, slidesToShow: 2, slidesToScroll: 1, infinite: false, arrows: false, responsive: [ { breakpoint: 800, settings: { slidesToShow: 4, slidesToScroll: 3, arrows: true, dots: false, infinite: true, } }, { breakpoint: 1200, settings: { slidesToShow: 5, slidesToScroll: 2, arrows: true, infinite: true, centerMode: true, } }, ], });В результате получится карусель с двумя слайдами на маленьких разрешениях.
При увеличении размеров окна браузера до 800px слайдов станет 4, появится навигация в виде стрелок, карусель станет замкнутой, точки пропадут.
Все это благодаря следующему коду:
responsive: [ { breakpoint: 800, settings: { slidesToShow: 4, slidesToScroll: 3, arrows: true, dots: false, infinite: true, } }, //... ]Если увеличить размеры окна до 1200px, слайдов станет 5, причем активный слайд будет располагаться по центру — это настройка centerMode, равная true.
На этом, я думаю, стало понятно, как подключить карусель и настроить ее. И, как обещала, вот все опции Snake c описанием.
Опции Snake
|
Название |
Значение по умолчанию |
Описание |
|
adaptiveHeight |
false |
boolean, устанавливает варьируемую высоту слайдера при разной высоте контента слайдов |
|
autoplay |
false |
boolean, автопрокрутка |
|
autoplaySpeed |
1000 |
int, количество миллисекунд до следующей автоматической прокрутки |
|
arrows |
true |
boolean, отображать стрелки |
|
asNavFor |
null |
string, селектор слайдера, для которого данный слайдер будет служить навигацией |
|
prevArrow |
‘<button type=»button»>Previous</button>’ |
string, HTML кнопки «Назад» |
|
nextArrow |
‘<button type=»button»>Next</button>’ |
string, HTML кнопки «Вперед» |
|
centerMode |
false |
boolean, активный слайд по центру |
|
centerPadding |
‘0px’ |
string, отступы справа и слева у отцентрированного с помощью centerMode слайдера |
|
dots |
true |
boolean, навигация в виде точек |
|
draggable |
true |
boolean, прокрутка с помощью мыши |
|
focusOnSelect |
false |
boolean, прокрутка к слайду при клике на него |
|
infinite |
true |
boolean, бесконечная прокрутка |
|
initialSlide |
1 |
number, первый слайд |
|
mobileFirst |
false |
boolean, начинать отсчет брейкпоинтов в массиве responsive c меньшего значения breakpoint |
|
pauseOnHover |
true |
boolean, останавливать автопрокрутку при наведении на слайды |
|
responsive |
null |
array, массив объектов с настройками для разных брейкпоинтов |
|
slidesToShow |
1 |
number, количество отображаемых слайдов |
|
slidesToScroll |
1 |
number, количество слайдов, на которое возможно пролистнуть слайдер |
|
speed |
500 |
number, скорость анимации пролистывания слайдера |
|
swipe |
true |
boolean, прокрутка при свайпе |
Демо и Gitgub
Демо: http://hjolda.ru/
GitHub: https://github.com/hjolda/sna
ссылка на оригинал статьи https://habr.com/ru/articles/890224/
Добавить комментарий