Компоненты/Карусель функций продукта

Карусель функций продукта

29 сентября 2026

Лента карточек-функций под фото продукта: активная раскрывается в описание, соседние сжимаются в стрелки, а фото сменяется со сдвигом.

Установка

npm install clsx lucide-react motion tailwind-merge
pnpm add clsx lucide-react motion tailwind-merge
yarn add clsx lucide-react motion tailwind-merge
bun add clsx lucide-react motion tailwind-merge

Файлы

product-feature-carousel.tsx
НазадБлок функций продуктаДалееРаскрывающаяся панель продукта

Под крупным фото продукта едет горизонтальная лента функций. Активная карточка раскрыта в описание, а соседние сжимаются до круглых кнопок-стрелок: нажатие на них или свайп ленты выбирает следующую функцию.

При смене функции фото уезжает в сторону и на его место со сдвигом и масштабом приезжает новое. В карточке «Цвета» есть кружки оттенков, которые переключают фото продукта.

Вручную

Скопируйте эти файлы в components/product-feature-carousel/:

Общие помощники положите в lib/ проекта:

Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.

Использование

import { ProductFeatureCarousel } from "@/components/product-feature-carousel/product-feature-carousel";

export function Features() {
return (
  <ProductFeatureCarousel
    features={[{ id: 1, name: "Корпус", desc: " Лёгкий алюминий.", desc2: " Прочный и тонкий.", src: "/photos/body.webp" }]}
    colors={[{ id: 0, color: "#ffffff", src: "/photos/white.webp" }]}
    defaultColor={null}
  />
);
}

Пропсы

Пропс
Описание
features

Функции: id, name, desc, desc2 (виден на широких экранах), src

Тип ProductCarouselFeature[]

colors

Оттенки для первой функции: id, color, src

Тип ProductCarouselColor[]

defaultActive?

Индекс активной функции при первом показе

Тип number·По умолчанию 0

defaultColor?

Выбранный оттенок при первом показе

Тип number | null·По умолчанию 1

background?

Фон витрины

Тип string·По умолчанию "#000000"

height?

Высота блока, px

Тип number·По умолчанию 745

radius?

Скругление блока, px

Тип number·По умолчанию rounded-4xl

className?

Классы внешней обёртки

Тип string