Blossom Carousel Logo
Experimental

Scroll State Query

Use CSS scroll-state container queries to style slides based on their snap state.

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: x mandatory;
}

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

  container-type: scroll-state;
  container-name: snap-container;
}

.card {
  width: 100%;
  height: 100%;
  background: color-mix(in srgb, var(--color-primary) 50%, transparent);
}

@container snap-container scroll-state(snapped: x) {
  .card {
    background: var(--color-primary);
  }
}

CSS Controls

Use ::scroll-button and ::scroll-marker pseudo-elements to create interactive controls with CSS.

Scroll Snap Events

Trigger actions when a slide snaps using native scroll snap events.