Carousel Configurator

A small experience to aid in visualizing the capabilities and features of the CSS Carousel work.

HTML

<ul class="carousel">
  <li>…</li>
  <li>…</li>
  …
<ul>

CSS

.carousel {
  overflow: auto;
  scroll-snap-type: x mandatory;
  anchor-name: --carousel;
  
  columns: 1;
  block-size: 25cqi;
  text-align: center;

  &::column {
    scroll-snap-align: center;
  }

  /* Dot Navigation */
  scroll-marker-group: after;

  &::column::scroll-marker {
    content: ' ';

    &:target-current {
      background: var(--accent);
    }
  }
  
  /* Scroll Buttons */
  &::scroll-button(right), 
  &::scroll-button(left) {
    position: fixed;
    position-anchor: --carousel;
  }

  &::scroll-button(right) {
    --_inner: center span-inline-start;
    --_outer: inline-end center;

    position-area: var(--_outer);
    content: 'arrow_forward' / 'Next';
  }
  
  &::scroll-button(left) {
    --_inner: center span-inline-end;
    --_outer: inline-start center;

    position-area: var(--_outer);
    content: 'arrow_back' / 'Previous';
  }

}