Skip to content

css-carousel.md

Latest commit

 

History

History
114 lines (93 loc) · 2.25 KB

css-carousel.md

File metadata and controls

114 lines (93 loc) · 2.25 KB

CSS Carousel

Note

  • Works with JavaScript disabled.
  • No hydration or lazy sizing (reduce CLS).
  • Ready for all kinds of scroll animation and triggers.
  • Accessibility is included.
  • Touch, mouse, and keyboard friendly.

Snap Scroller

<ul class="carousel">
  <li>…</li>
  <li>…</li>
  …
<ul>
.carousel {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  anchor-name: --carousel;

  > li {
    scroll-snap-align: center;
  }
}

Scroll Buttons

.carousel {
  &::scroll-button(*) {
    position: fixed;
    position-anchor: --carousel;
    font-family: "Material Symbols Outlined";
  }

  &::scroll-button(left) {
    position-area: inline-start center;
    content: 'arrow_back' / 'Previous';
  }

  &::scroll-button(right) {
    position-area: inline-end center;
    content: 'arrow_forward' / 'Next';
  }
}

Scroll Markers

.carousel {
  scroll-marker-group: after;

  &::scroll-marker-group {
    position: fixed;
    position-anchor: --carousel;
    position-area: block-end;
    margin: 10px;

    display: grid;
    grid-auto-columns: 20px;
    grid-auto-flow: column;
    gap: 20px;
  }

  & > li::scroll-marker {
    content: ' ';

    &:target-current {
      background: var(--accent);
    }
  }
}
.carousel {
  &::scroll-button(left) {
    content: "⬅" / "Scroll Left";
  }
  &::scroll-button(right) {
    content: "⮕" / "Scroll Right";
  }
  &::scroll-button(*)::focus-visible {
    outline-offset: 5px;
  }

  scroll-marker-group: after;

  > li::scroll-marker {
    content: ' ';

    &:target-current {
      background: var(--accent);
    }
  }
}