Interactive Carousel

An interactive carousel component built with Embla Carousel that visually highlights selected items with smooth sliding background transitions. Features hover and click interactions, perfect for creating engaging lists, menus, and navigation elements with clear selection feedback.

Open in

Installation

npx uilayouts@latest add carousel

Usage

// !mark(16:20) gold
// !mark(22:24) blue
// !mark(26:28) green
// !mark(30) gold
// !mark(32) gold

import type { EmblaOptionsType } from 'embla-carousel';
import {
  Carousel,
  Slider,
  SliderContainer,
  SliderDotButton,
  SliderNextButton,
  SliderPrevButton,
} from './carousel';

function index() {
  const OPTIONS: EmblaOptionsType = { loop: false };
  return (
    <>
      <Carousel options={OPTIONS}>
        <SliderContainer>
          <Slider></Slider>
          <Slider></Slider>
          <Slider></Slider>
        </SliderContainer>

        <SliderPrevButton>
          <ChevronLeft />
        </SliderPrevButton>

        <SliderNextButton>
          <ChevronRight />
        </SliderNextButton>

        <SliderDotButton />

        <SliderSnapDisplay />
      </Carousel>
    </>
  );
}

Props

Prop	Type	Default	Description
defaultValue	string	string[]	undefined
multiple	boolean	false	Whether the accordion allows multiple items to be active at the same time
children	ReactNode[]	undefined	The accordion items, including their headers and panels
className	string	''	Optional CSS class for styling the accordion wrapper