Basic
Buttons
Use .prev() and .next() to cycle through slides with interactive buttons.
1
2
3
4
5
6
7
8
9
10
.carousel {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 200px;
gap: 1rem;
}
.slide {
width: 100%;
aspect-ratio: 3 / 4;
}
<BlossomCarousel class="carousel">
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
...
</BlossomCarousel>
<button onclick="carousel.prev()">Previous</button>
<button onclick="carousel.next()">Next</button>
.html
<BlossomCarousel class="grid auto-cols-[200px] grid-flow-col gap-4">
<div class="w-full aspect-3/4"></div>
<div class="w-full aspect-3/4"></div>
<div class="w-full aspect-3/4"></div>
...
</BlossomCarousel>
<button onclick="carousel.prev()">Previous</button>
<button onclick="carousel.next()">Next</button>