Карусель
Галерея с лайтбоксом
Лента миниатюр, по клику кадр открывается крупно поверх страницы: стрелки, счётчик «3 из 12», а ловушка фокуса и Escape достаются от нативного dialog.
Что можно поменять
- заголовок галереи через label и набор кадров через shots
- шаблон счётчика counter с подстановками {n} и {total}
- пропорции крупного кадра через ratio: 4:3, 16:9 или 1:1
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/carousel-017?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Для разработчика
Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.
Технические заметки
Клиентский компонент: номер открытого кадра лежит в useState, окно — нативный <dialog>, открываемый через showModal(). Один файл, без зависимостей, палитра в локальных переменных --vibeui-carousel-017-*. Кадры не картинки: каждый снимок описан тоном в градусах и рисуется градиентом через переменную --vibeui-carousel-017-hue, поэтому у item'а нет ни изображений, ни сетевых запросов. Модальный режим даёт ловушку фокуса, закрытие по Escape и затемнение фона бесплатно; правило html:has(dialog[open]:modal){overflow:hidden} добирает то, чего браузер не делает, — блокировку прокрутки страницы. Стрелки внутри окна листают по кругу, ArrowLeft и ArrowRight делают то же с клавиатуры, счётчик собирается из шаблона counter. Проп defaultOpen открывает окно немодально через show(): оно остаётся внутри блока и попадает в кадр витрины.
Теги
- gallery
- lightbox
- dialog
- carousel
- client
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…