Carousel Component
The Carousel component is a slideshow interface that allows users to cycle through a series of content items, such as images, text, or videos.
Carousel
<div class="carousel">
<div class="carousel-item h-80">
<img
src="https://images.unsplash.com/photo-1670995982270-b892c06054c5?q=80&w=3987&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Image" />
</div>
<div class="carousel-item h-80">
<img
src="https://images.unsplash.com/photo-1558975355-84703f540cf6?q=80&w=3712&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Image" />
</div>
<!-- Add more items here -->
</div>
<div className="carousel">
<div className="carousel-item h-80">
<img
src="https://images.unsplash.com/photo-1670995982270-b892c06054c5?q=80&w=3987&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Image" />
</div>
<div className="carousel-item h-80">
<img
src="https://images.unsplash.com/photo-1558975355-84703f540cf6?q=80&w=3712&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Image" />
</div>
<!-- Add more items here -->
</div>
Snap to Start
<div class="carousel carousel-vertical h-80">
<div class="carousel-item h-80">
<img
src="https://images.unsplash.com/photo-1670995982270-b892c06054c5?q=80&w=3987&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Image" />
</div>
<div class="carousel-item h-80">
<img
src="https://images.unsplash.com/photo-1558975355-84703f540cf6?q=80&w=3712&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Image" />
</div>
<!-- Add more items here -->
</div>
<div className="carousel carousel-vertical h-80">
<div className="carousel-item h-80">
<img
src="https://images.unsplash.com/photo-1670995982270-b892c06054c5?q=80&w=3987&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Image" />
</div>
<div className="carousel-item h-80">
<img
src="https://images.unsplash.com/photo-1558975355-84703f540cf6?q=80&w=3712&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Image" />
</div>
<!-- Add more items here -->
</div>
Snap to Center
<div class="carousel carousel-vertical h-80">
<div class="carousel-item h-80">
<img
src="https://images.unsplash.com/photo-1670995982270-b892c06054c5?q=80&w=3987&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Image" />
</div>
<div class="carousel-item h-80">
<img
src="https://images.unsplash.com/photo-1558975355-84703f540cf6?q=80&w=3712&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Image" />
</div>
<!-- Add more items here -->
</div>
<div className="carousel carousel-vertical h-80">
<div className="carousel-item h-80">
<img
src="https://images.unsplash.com/photo-1670995982270-b892c06054c5?q=80&w=3987&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Image" />
</div>
<div className="carousel-item h-80">
<img
src="https://images.unsplash.com/photo-1558975355-84703f540cf6?q=80&w=3712&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Image" />
</div>
<!-- Add more items here -->
</div>
Snap to End
<div class="carousel carousel-vertical h-80">
<div class="carousel-item h-80">
<img
src="https://images.unsplash.com/photo-1670995982270-b892c06054c5?q=80&w=3987&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Image" />
</div>
<div class="carousel-item h-80">
<img
src="https://images.unsplash.com/photo-1558975355-84703f540cf6?q=80&w=3712&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Image" />
</div>
<!-- Add more items here -->
</div>
<div className="carousel carousel-vertical h-80">
<div className="carousel-item h-80">
<img
src="https://images.unsplash.com/photo-1670995982270-b892c06054c5?q=80&w=3987&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Image" />
</div>
<div className="carousel-item h-80">
<img
src="https://images.unsplash.com/photo-1558975355-84703f540cf6?q=80&w=3712&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Image" />
</div>
<!-- Add more items here -->
</div>
Carousel Fit Content
<div class="carousel carousel-vertical h-80">
<div class="carousel-item h-80">
<img
src="https://images.unsplash.com/photo-1670995982270-b892c06054c5?q=80&w=3987&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Image" />
</div>
<div class="carousel-item h-80">
<img
src="https://images.unsplash.com/photo-1558975355-84703f540cf6?q=80&w=3712&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Image" />
</div>
<!-- Add more items here -->
</div>
<div className="carousel carousel-vertical h-80">
<div className="carousel-item h-80">
<img
src="https://images.unsplash.com/photo-1670995982270-b892c06054c5?q=80&w=3987&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Image" />
</div>
<div className="carousel-item h-80">
<img
src="https://images.unsplash.com/photo-1558975355-84703f540cf6?q=80&w=3712&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Image" />
</div>
<!-- Add more items here -->
</div>
Carousel Vertical
<div class="carousel carousel-vertical h-80">
<div class="carousel-item h-80">
<img
src="https://images.unsplash.com/photo-1670995982270-b892c06054c5?q=80&w=3987&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Image" />
</div>
<div class="carousel-item h-80">
<img
src="https://images.unsplash.com/photo-1558975355-84703f540cf6?q=80&w=3712&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Image" />
</div>
<!-- Add more items here -->
</div>
<div className="carousel carousel-vertical h-80">
<div className="carousel-item h-80">
<img
src="https://images.unsplash.com/photo-1670995982270-b892c06054c5?q=80&w=3987&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Image" />
</div>
<div className="carousel-item h-80">
<img
src="https://images.unsplash.com/photo-1558975355-84703f540cf6?q=80&w=3712&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Image" />
</div>
<!-- Add more items here -->
</div>
Bleeded Items
<div class="carousel carousel-vertical h-80">
<div class="carousel-item h-80">
<img
src="https://images.unsplash.com/photo-1670995982270-b892c06054c5?q=80&w=3987&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Image" />
</div>
<div class="carousel-item h-80">
<img
src="https://images.unsplash.com/photo-1558975355-84703f540cf6?q=80&w=3712&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Image" />
</div>
<!-- Add more items here -->
</div>
<div className="carousel carousel-vertical h-80">
<div className="carousel-item h-80">
<img
src="https://images.unsplash.com/photo-1670995982270-b892c06054c5?q=80&w=3987&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Image" />
</div>
<div className="carousel-item h-80">
<img
src="https://images.unsplash.com/photo-1558975355-84703f540cf6?q=80&w=3712&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Image" />
</div>
<!-- Add more items here -->
</div>
Customization Options
To customize the border-radius of carousel items, you can override the --separate-carousel-border-radius variable in your CSS. Here’s how to do it:
--separate-carousel-border-radius: 20px; /* Adjust this value as needed */
Contribute ideas!
Share Your Ideas! While we can’t guarantee that every request will be added, we will definitely consider your suggestions for future updates.