Blossom Carousel Logo
Basic

Snapping

Make a snapping carousel with Blossom Carousel.
1
2
3
4
5
6
7
8
9
10
.carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 200px;
  gap: 1rem;
  scroll-snap-type: inline mandatory;
}

.slide {
  width: 100%;
  aspect-ratio: 3 / 4;
  scroll-snap-align: center;
}

Simple

Make a scrollable and draggable carousel with Blossom Carousel.

Masonry

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