Snake, альтернатива Slick slider на чистом JavaScript12.03.2025 14:16

Для создания современных сайтов разработчики все чаще стали пользоваться реактивными фреймворками или чистым JavaScript, отказываясь при этом от библиотеки jQuery. Однако остаются плагины, от которых не так просто отказаться. К таким относится Slick slider. Он очень удобен в использовании и сочетает в себе все необходимые для создания каруселей опции. Сегодня хочу рассказать о слайдере Snake, который очень похож на Slick по своей функциональности, но не имеет сторонних зависимостей и, соответственно, не требует подключения jQuery. Мы поговорим о том, какие у слайдера есть плюсы и минусы, рассмотрим, как им пользоваться, а также познакомимся с опциями Snake.

Для тех, кто не хочет читать вест текст, оговорюсь, что полный список настроек, демо и ссылка на код на GitHub есть в конце статьи.

Плюсы и минусы Snake

Итак, из достоинств Snakeстоит отметить следующие:

• Как уже было сказано, карусель написана на чистом JS и не имеет сторонних зависимостей.

• Уже знакомый функционал: опции называются так же, как у Slick.

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

• Лаконичный код инициализации: создавая инстанс Snake, передаем селектор по аналогии с плагинами jQuery.

• Простое подключение — добавляем стили и скрипт, и карусель готова к работе.

• Сайт слайдера визуально похож на сайт Slick, там будет комфортно ориентироваться.

  Что касается недостатков,

• в Snake реализованы не все возможности Slick, а лишь основные.

• Нет подробной документации.

  Последнюю проблему мы постараемся решить, рассмотрев опции Snake в этой статье.

Начало работы со слайдером

А сейчас давайте посмотрим, как начать работу со слайдером. Для этого необходимо скачать код Snake по ссылке и перенести папку snake в ваш проект. После этого в тэге head подключаем стили и js-файл.

Затем прописываем HTML-разметку карусели:

  
slide 1
  
slide 2
  
slide 3

И в файле script.js инициализируем Snake:

new Snake('.some-class');

В целом должно получиться следующее.

Файл index.html

    
        
        
        
        
        
    
    
        

            
slide 1
            
slide 2
            
slide 3
        
    

Файл 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,
            }
        },
    ],
});

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

При увеличении размеров окна браузера до 800 px слайдов станет 4, появится навигация в виде стрелок, карусель станет замкнутой, точки пропадут.

Все это благодаря следующему коду:

responsive: [
    {
        breakpoint: 800,
        settings: {
            slidesToShow: 4,
            slidesToScroll: 3,
            arrows: true,
            dots: false,
            infinite: true,
        }
    },
//...
]

Если увеличить размеры окна до 1200 px, слайдов станет 5, причем активный слайд будет располагаться по центру — это настройка centerMode, равная true.

На этом, я думаю, стало понятно, как подключить карусель и настроить ее. И, как обещала, вот все опции Snake c описанием.

Опции Snake

Демо и Gitgub

Демо: http://hjolda.ru/

GitHub: https://github.com/hjolda/sna