WS Slider

Подключение

import { wsSlider } from '/core/modules/ws-slider/assets/js/initial.js';

Быстрый старт

<div class="slider" data-slider>
    <div class="slider-viewport" data-slider-viewport>
        <div class="slider-track" data-slider-track>
            <div class="slider-slide" data-slider-slide>1</div>
            <div class="slider-slide" data-slider-slide>2</div>
            <div class="slider-slide" data-slider-slide>3</div>
        </div>
    </div>

    <button type="button" data-slider-prev>Prev</button>
    <button type="button" data-slider-next>Next</button>
    <div data-slider-pagination></div>
</div>

import { wsSlider } from '/core/modules/ws-slider/assets/js/initial.js';

const slider = wsSlider(document.querySelector('[data-slider]'), {
    mode: 'carousel',
    perView: 1,
    gap: 20,
    loop: true,
    autoplay: true,
    autoplayDelay: 4000,
    swipe: true,
    pagination: true
});

HTML-структура

Модуль ожидает корневой контейнер с обязательными внутренними элементами viewport, track и хотя бы одним slide.

Обязательные элементы:

• data-slider-viewport — ограничивает видимую область слайдера
• data-slider-track — содержит набор слайдов
• data-slider-slide — отдельный слайд

Опциональные элементы:

• data-slider-prev — кнопка переключения назад
• data-slider-next — кнопка переключения вперёд
• data-slider-pagination — контейнер пагинации

Инициализация

Через wsSlider()

Используйте этот вариант, если нужен быстрый старт без ручного управления экземпляром.

const slider = wsSlider(document.querySelector('[data-slider]'), {
    mode: 'carousel'
});

Параметры

Общие параметры

Параметры режима carousel

Параметры режима ticker

selectors

breakpoints

Через breakpoints можно переопределять параметры в зависимости от ширины viewport.

const slider = wsSlider(document.querySelector('[data-slider]'), {
    mode: 'carousel',
    perView: 1,
    gap: 16,
    breakpoints: {
        768: {
            perView: 2,
            gap: 24
        },
        1200: {
            perView: 3,
            gap: 32
        }
    }
});

Рекомендуется использовать в breakpoints только те параметры, которые реально должны меняться на конкретной ширине экрана.

Режимы работы

carousel

Режим пошагового или постраничного переключения слайдов.

Когда использовать:

• если нужно переключение по кнопкам prev / next
• если нужна пагинация по страницам
• если требуется autoplay с задержкой
• если нужен swipe на мобильных устройствах
• если слайды должны переключаться дискретно, а не двигаться непрерывной лентой

Особенности режима:

• использует анимированное смещение track
• поддерживает perView, step, gap и transition
• поддерживает loop
• поддерживает autoplay
• поддерживает swipe
• поддерживает пагинацию
• может начинаться с заданного startIndex

Пример:

const slider = wsSlider(document.querySelector('[data-slider]'), {
    mode: 'carousel',
    perView: 1,
    step: 1,
    gap: 20,
    transition: 400,
    loop: true,
    autoplay: true,
    autoplayDelay: 4000,
    swipe: true,
    pagination: true
});

ticker

Режим непрерывного горизонтального движения содержимого.

Когда использовать:

• если нужен бесконечный бегущий ряд карточек, логотипов или баннеров
• если не требуется дискретное переключение по страницам
• если нужен эффект непрерывной ленты

Особенности режима:

• работает как непрерывная лента
• автоматически собирает повторяющуюся дорожку для бесконечного движения
• поддерживает pauseOnHover
• поддерживает pauseOnInteraction
• учитывает speed, direction и gap
• не предназначен для обычной пагинации по страницам

Пример:

const slider = wsSlider(document.querySelector('[data-slider]'), {
    mode: 'ticker',
    gap: 32,
    speed: 0.8,
    direction: 'left',
    pauseOnHover: true,
    pauseOnInteraction: true
});

Что выбрать

Используйте carousel, если:

• нужен управляемый слайдер с переключением по шагам
• важны pagination, autoplay и swipe
• нужно показывать определённое число слайдов в viewport

Используйте ticker, если:

• нужен непрерывный поток карточек или логотипов
• важен эффект живой движущейся ленты
• не требуется обычное перелистывание по страницам

Публичный API

wsSlider(sliderNode, options)

Функция для создания и инициализации слайдера.

Параметры:

Возвращает:

Пример:

import { wsSlider } from '/core/modules/ws-slider/assets/js/initial.js';

const slider = wsSlider(document.querySelector('[data-slider]'), {
    mode: 'carousel',
    perView: 1,
    gap: 20,
    loop: true
});

Ограничения и замечания

• модуль ожидает корректную DOM-структуру с viewport, track и хотя бы одним slide
• в режиме carousel параметры autoplay, loop и swipe работают только внутри логики carousel
• в режиме ticker слайды дублируются для непрерывного движения ленты
• после изменения набора слайдов или структуры DOM вызовите update()
• breakpoints переопределяют базовые параметры в зависимости от ширины viewport