Carousel Extended

A carousel with motion and swipe built using Embla.

carousel

Demos

1. Vertical

Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10

2. Horizontal

Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5

3. Indicator

Slide 1
Slide 2
Slide 3
Slide 4
Slide 5

About

The Carousel component is built on top of Embla Carousel library.

Installation

Run the following command:

npx ever-ui-clx@0.2.1 add demo-carousel-extended

Usage

import {
  Carousel,
  CarouselMainContainer,
  CarouselThumbsContainer,
  SliderMainItem,
  SliderThumbItem,
} from "@/components/ui/carousel-extended";
<Carousel
  carouselOptions={
    // See embla-carousel docs
  }
  orientation="vertical"
>
  <CarouselMainContainer className="h-60">
    <SliderMainItem> slide 1 </SliderMainItem>
    <SliderMainItem> slide 2 </SliderMainItem>
    <SliderMainItem> ... </SliderMainItem>
  </CarouselMainContainer>
 
  <CarouselThumbsContainer className="h-60">
    <SliderThumbItem index={1}> slide 1 </SliderThumbItem>
    <SliderThumbItem index={2}> slide 2 </SliderThumbItem>
    <SliderThumbItem index={...}> ... </SliderThumbItem>
  </CarouselThumbsContainer>
</Carousel>
IconCarousel CylindricalCarousel SliderIcon