Для создания современных сайтов разработчики все чаще стали пользоваться реактивными фреймворками или чистым 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