Перейти к содержимому

CoreSlider

Примеры использования и документация.

Горизонтальная карусель панелей: пользователь листает карточки, товары или слайды свайпом и кнопками, а контент остаётся в одной строке. Берите для галерей товаров, историй и баннеров, где важен жест прокрутки и цикличность.

Технические детали: обёртка над @egjs/flicking — опции передаются напрямую в options (circular, align, bound — панели прижаты к краям вьюпорта, infinite + infiniteThreshold — бесконечная прокрутка), но не реактивны: применяются при пересоздании. plugins — плагины экосистемы @egjs/flicking-plugins (new AutoPlay({...}) и т.п.), вешаются через addPlugins (опция конструктора plugins в Flicking не существует) и пересобираются реактивно при смене массива. Панели — слот default. Императивное управление через ref: next(), prev(), moveTo(index), getIndex(), insertPanels(index, html) — вставка HTML-панелей мимо Vue (для needPanel: стартуйте с N панелей в слоте и досоздавайте по 8–16 на событие). Смена панели отдаётся событием changed (пейлоад — индекс новой панели), подход камеры к краю — needPanel. Вложенные карусели поддерживаются (внутренний слайдер в панели внешнего).

Circular — цикл, кнопки, клавиатура ←/→ на фокусе, подсветка активной панели
1Слайд 1
2Слайд 2
3Слайд 3
4Слайд 4
5Слайд 5

индекс: 0

Bound — края панелей прижаты к краям вьюпорта, без хвостов по бокам
1Первый
2Второй
3Третий
4Последний
Infinite — 16 панелей, догрузка по 8 через needPanel (до 48)
1Догружаемый слайд
2Догружаемый слайд
3Догружаемый слайд
4Догружаемый слайд
5Догружаемый слайд
6Догружаемый слайд
7Догружаемый слайд
8Догружаемый слайд
9Догружаемый слайд
10Догружаемый слайд
11Догружаемый слайд
12Догружаемый слайд
13Догружаемый слайд
14Догружаемый слайд
15Догружаемый слайд
16Догружаемый слайд

панелей сейчас: 16 — свайпните к правому краю

Слайдер в слайдере — свайп снаружи листает родительские панели, внутри каждой своя карусель на всю ширину слайда
Родительская панель 1 — внутренний слайдер:
1.1Тренд 1
1.2Тренд 2
1.3Тренд 3
1.4Тренд 4
1.5Тренд 5
Родительская панель 2 — внутренний слайдер:
2.1Тренд 1
2.2Тренд 2
2.3Тренд 3
2.4Тренд 4
2.5Тренд 5
Родительская панель 3 — внутренний слайдер:
3.1Тренд 1
3.2Тренд 2
3.3Тренд 3
3.4Тренд 4
3.5Тренд 5
AutoPlay — листается сам каждые 1.5 с (флаг autoplay, плагин импортируется лениво)
1Автослайд
2Автослайд
3Автослайд