Basic
Dots
Add interactive dot markers with the BlossomDots component.
1
2
3
4
5
6
7
8
9
10
.html
<BlossomCarousel id="gallery" class="carousel">
<div data-blossom-slide class="slide"></div>
<div data-blossom-slide class="slide"></div>
<div data-blossom-slide class="slide"></div>
...
</BlossomCarousel>
<BlossomDots for="gallery" />
.css
.carousel {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 100%;
gap: 1rem;
scroll-snap-type: x mandatory;
height: 22.5rem;
}
.slide {
width: 100%;
scroll-snap-align: center;
}
.html
<BlossomCarousel
id="gallery"
class="grid auto-cols-[200px] grid-flow-col gap-4"
>
<div data-blossom-slide class="w-full aspect-3/4"></div>
<div data-blossom-slide class="w-full aspect-3/4"></div>
<div data-blossom-slide class="w-full aspect-3/4"></div>
...
</BlossomCarousel>
<BlossomDots for="gallery" />