Carousel

Carousels display a series of content items in a sliding or rotating format.

Carousels are interactive components that allow users to browse through multiple items, such as images, testimonials, or other content, in a visually engaging way.

Multi Item Carousel

Displays multiple items simultaneously in a responsive sliding carousel, ideal for product grids or image galleries.

Integration:

import MultiItemCarousel from './components/carousels/MultiItemCarousel';
<MultiItemCarousel />

Features:

Show multiple items: slidesPerView=3
Responsive design: breakpoints={ 960: { slidesPerView: 2 }, 600: { slidesPerView: 1 } }
Add navigation arrows: navigation=true
Add pagination dots: pagination={ clickable: true }
Transition speed: speed=500

Vertical Carousel

Scrolls content vertically, ideal for compact layouts or mobile-first designs.

Integration:

import VerticalCarousel from './components/carousels/VerticalCarousel';
<VerticalCarousel />

Features:

Vertical scrolling: direction="vertical"
Add pagination dots: pagination={ clickable: true }
Adjust height: Modify container height via CSS or sx prop
Transition speed: speed=500

3D Carousel

Showcases content with a 3D cube effect for a visually striking presentation.

Integration:

import ThreeDCarousel from './components/carousels/3DCarousel';
<ThreeDCarousel />

Features:

3D cube effect: effect="cube" with cubeEffect={ shadow: true, slideShadows: true }
Add pagination dots: pagination={ clickable: true }
Adjust transition speed: speed=500
Slide spacing: spaceBetween=20

Content Carousel

Displays rich content, such as articles or cards, with navigation for detailed presentations.

Integration:

import ContentCarousel from './components/carousels/ContentCarousel';
<ContentCarousel />

Features:

Add navigation arrows: navigation=true
Add pagination dots: pagination={ clickable: true }
Customize content: Include images or text within slides
Transition speed: speed=500