Basic
Sticky Slides
Use CSS position sticky inside a Blossom Carousel.
1
Slide 01
2
Slide 02
3
Slide 03
4
Slide 04
5
Slide 05
6
Slide 06
7
Slide 07
8
Slide 08
9
Slide 09
10
Slide 10
.carousel {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 100%;
gap: 1rem;
height: 22.5rem;
}
.slide {
display: grid;
grid-template-rows: 1fr auto;
gap: 0.5rem;
}
.card {
width: 100%;
height: 100%;
}
.label {
position: sticky;
left: 0;
width: fit-content;
}
<BlossomCarousel class="carousel">
<div class="slide">
<div class="card"></div>
<p class="label">Slide 01</p>
</div>
<div class="slide">
<div class="card"></div>
<p class="label">Slide 02</p>
</div>
...
</BlossomCarousel>
.html
<BlossomCarousel class="grid! auto-cols-[100%] grid-flow-col gap-4 h-90">
<div class="grid! grid-rows-[1fr_auto] gap-2 size-full">
<div class="size-full"></div>
<p class="sticky left-0 w-fit px-2">Slide 01</p>
</div>
<div class="grid! grid-rows-[1fr_auto] gap-2 size-full">
<div class="size-full"></div>
<p class="sticky left-0 w-fit px-2">Slide 02</p>
</div>
...
</BlossomCarousel>