Blossom Carousel Logo
Basic

Masonry

Create complex layouts and snap to any cell in the grid using CSS grid.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.carousel {
  display: grid;
  grid-auto-columns: 200px;
  grid-template-rows: repeat(3, 1fr);
  grid-auto-flow: column dense;
  gap: 1rem;
  scroll-snap-type: x mandatory;
}

.slide {
  &:nth-child(3n + 2) {
    grid-column: span 2;
  }

  &:nth-child(4n + 1) {
    scroll-snap-align: center;
    background-color: var(--color-primary);
  }

  &:nth-child(1),
  &:nth-child(6),
  &:nth-child(13) {
    grid-row: span 2;
  }
}

Snapping

Make a snapping carousel with Blossom Carousel.

Right to Left

Build a right-to-left carousel with the standard HTML dir attribute.