Blossom Carousel Logo
Basic

Right to Left

Build a right-to-left carousel with the standard HTML dir attribute.
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;
}

Masonry

Create complex layouts and snap to any cell in the grid using CSS grid.

Sticky Slides

Use CSS position sticky inside a Blossom Carousel.