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

CoreSlider

Живой MDC-рендер и исходник для копирования.

Живой рендер

Так ContentRenderer отрисует этот контент на реальной странице.

Карусель-слайдер на @egjs/flicking: панели — слот (ширину задаёт ваша разметка), опции — :options='{…}', плагины — флаги autoplay/fade. Чанк @egjs/flicking-plugins импортируется лениво — только при включённых флагах.

Панели

Слайд 1: скидки недели.

Слайд 2: новинки каталога.

Слайд 3: подписка на рассылку.

Слайд 4: бесплатная доставка.

Слайд 5: подарочные карты.

Слайд 6: хиты продаж.

Слайд 7: распродажа коллекций.

Слайд 8: кэшбэк до 10%.

Слайд 9: наборы со скидкой.

Слайд 10: реферальная программа.

Автолистание

Флаг autoplay принимает конфиг (duration, direction); пауза на hover/focus включена всегда:

Отзыв 1: быстрый сайт.

Отзыв 2: красивые компоненты.

Отзыв 3: доступность из коробки.

Отзыв 4: тёмная тема из коробки.

Отзыв 5: форма за один конфиг.

Отзыв 6: типографика — восторг.

Отзыв 7: слайдер без строчек кода.

Отзыв 8: валидация понятная пользователю.

Кросс-фейд

fade включайте вместе с options.circular:

Промо-акция недели — детали в каталоге.

Новая коллекция уже в продаже.

Подарочные карты к праздникам.

Сезонная распродажа — минус 30%.

Доставка бесплатно от 10 000 ₸.

Исходник (MDC)

Тот же код текстом — скопируйте в свой контент как есть.
MDC
Карусель-слайдер на @egjs/flicking: панели — слот (ширину задаёт ваша разметка), опции — `:options='{…}'`, плагины — флаги `autoplay`/`fade`. Чанк `@egjs/flicking-plugins` импортируется лениво — только при включённых флагах.

### Панели

::core-slider{label="Акции" :options='{ "align": "prev", "gap": 12 }'}
::div{.w-56.p-3}
Слайд 1: скидки недели.
::
::div{.w-56.p-3}
Слайд 2: новинки каталога.
::
::div{.w-56.p-3}
Слайд 3: подписка на рассылку.
::
::div{.w-56.p-3}
Слайд 4: бесплатная доставка.
::
::div{.w-56.p-3}
Слайд 5: подарочные карты.
::
::div{.w-56.p-3}
Слайд 6: хиты продаж.
::
::div{.w-56.p-3}
Слайд 7: распродажа коллекций.
::
::div{.w-56.p-3}
Слайд 8: кэшбэк до 10%.
::
::div{.w-56.p-3}
Слайд 9: наборы со скидкой.
::
::div{.w-56.p-3}
Слайд 10: реферальная программа.
::
::

### Автолистание

Флаг `autoplay` принимает конфиг (`duration`, `direction`); пауза на hover/focus включена всегда:

::core-slider{label="Отзывы" :options='{ "circular": true, "align": "prev", "gap": 12 }' :autoplay='{ "duration": 1500 }'}
::div{.w-56.p-3}
Отзыв 1: быстрый сайт.
::
::div{.w-56.p-3}
Отзыв 2: красивые компоненты.
::
::div{.w-56.p-3}
Отзыв 3: доступность из коробки.
::
::div{.w-56.p-3}
Отзыв 4: тёмная тема из коробки.
::
::div{.w-56.p-3}
Отзыв 5: форма за один конфиг.
::
::div{.w-56.p-3}
Отзыв 6: типографика — восторг.
::
::div{.w-56.p-3}
Отзыв 7: слайдер без строчек кода.
::
::div{.w-56.p-3}
Отзыв 8: валидация понятная пользователю.
::
::

### Кросс-фейд

`fade` включайте вместе с `options.circular`:

::core-slider{label="Промо" :options='{ "circular": true, "align": "prev" }' fade}
::div{.w-full.p-3.text-center}
Промо-акция недели — детали в каталоге.
::
::div{.w-full.p-3.text-center}
Новая коллекция уже в продаже.
::
::div{.w-full.p-3.text-center}
Подарочные карты к праздникам.
::
::div{.w-full.p-3.text-center}
Сезонная распродажа — минус 30%.
::
::div{.w-full.p-3.text-center}
Доставка бесплатно от 10 000 ₸.
::
::