VibeUI
РусEng
Войти

Карусели

Слайдер с растворением

Кадры сменяются растворением, а не сдвигом: слайды лежат стопкой в одной ячейке грида, снизу точки-пейджер, подпись живёт вместе с кадром.

React + Tailwind, совместим с shadcn: нажмите «Копировать для ИИ» — агент в Cursor или Claude Code поставит его через shadcn CLI.

Что можно поменять

  • набор кадров через slides: заголовок, текст и тон hue у каждого
  • пропорции кадра через ratio: 16:9, 4:3 или 21:9
  • место подписи через captionPlace: поверх кадра или строкой под ним

Ссылка для ИИ-агента: в ней превью, код и инструкция.

Превью

1440pxТема страницы
Слайдер с растворением — Кадры сменяются растворением, а не сдвигом: слайды лежат стопкой в одной ячейке грида, снизу точки-пейджер, подпись живёт вместе с кадром.

Использовать с ИИ

  1. 1. Скопируйте ссылку.
  2. 2. Напишите агенту своими словами и вставьте её в предложение.
  3. 3. Агент откроет ссылку и поставит компонент из реестра.
AI
1Выбрали здесь

добавь это на главную первым экраном:

https://vibeui.ru/c/carousel-018?theme=dark

2Вставили в чат агента
3Получили в проекте

Не знаете, куда вставить? Пошаговый гайд

Показать полную инструкцию

То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.

Загружается…

Как использовать

<Carousel018
  slides={[{ title: "Летняя коллекция", text: "Двадцать четыре модели.", hue: 22 }]}
  captionPlace="over"
/>

Пример вызова. Сам компонент агент ставит из реестра по ссылке «Копировать для ИИ».

Настройки

Пропорции
ratio · по умолчанию: 16:9
Подпись
captionPlace · по умолчанию: over
Акцент
accent · по умолчанию: цвет темы
Фон
background · по умолчанию: цвет темы

Ещё в разделе «Карусели»

Частые вопросы

Как установить компонент «Слайдер с растворением» через Cursor или Claude Code?
Нажмите «Копировать для ИИ» на этой странице и вставьте текст в чат агента. В инструкции команда установки через shadcn CLI, зависимости и что сохранить — агент поставит именно этот компонент, а не перерисует похожий.
Какие зависимости у компонента «Слайдер с растворением»?
Никаких npm-пакетов, кроме React и Tailwind CSS.
Что можно поменять в компоненте «Слайдер с растворением»?
Можно менять: набор кадров через slides: заголовок, текст и тон hue у каждого; пропорции кадра через ratio: 16:9, 4:3 или 21:9; место подписи через captionPlace: поверх кадра или строкой под ним. Сохранить как есть: локальную палитру --vibeui-carousel-018-* и не подменять её токенами вашей темы; стопку слайдов в одной ячейке грида: без неё высота блока прыгает на каждой смене кадра; смену прозрачностью вместо сдвига — в этом вся разница с лентой: hero меняет настроение, а не показывает список.
Компонент «Слайдер с растворением» бесплатный?
Да. Превью открыто без регистрации, а с бесплатным аккаунтом можно скопировать до 20 компонентов в месяц.

Для разработчика

npx shadcn@latest add https://vibeui.ru/r/pro/carousel-018.json

Команде нужна подписанная ссылка: войдите и откройте «Исходник компонента» ниже — там рабочая ссылка на 30 минут. Все способы установки

Технические заметки

Клиентский компонент: номер текущего слайда лежит в useState, переключают его точки-пейджер. Один файл, без зависимостей, палитра в локальных переменных --vibeui-carousel-018-*. Слайды не едут лентой: они лежат в одной ячейке грида (grid-area:1/1) и меняются прозрачностью, поэтому кадр не дёргается и высота держится сама. Кадры рисуются градиентами по тону --vibeui-carousel-018-hue, картинок в item'е нет. Каждая точка — настоящая кнопка с подписью-названием слайда и aria-current, вокруг видимого кружка есть невидимое поле нажатия в 24 пикселя; по ряду ходят стрелки, Home и End. Подпись слайда стоит в aria-live="polite" и переключается вместе с кадром, а её место задаётся пропом captionPlace: поверх кадра со шторкой-градиентом или отдельной строкой под ним.

Теги

  • carousel
  • fade
  • hero
  • pager
  • client
Исходник компонента

Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.

Загружается…