CSS Carousel - Indicator Dots

The common “dot navigation indicators” below the carousel, including all functionality (click interactions, which dot is the :target-current), is all CSS, automatically handled by the browser, no JS required.

Demo
HTML
CSS
JS
Baseline
CodePen

Demo

Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10

HTML

<!-- No special HTML required -->
<ul class="css-carousel">
  <li>Slide 1</li>
  <li>Slide 2</li>
  <li>Slide 3</li>
  <li>Slide 4</li>
  <li>Slide 5</li>
  <li>Slide 6</li>
  <li>Slide 7</li>
  <li>Slide 8</li>
  <li>Slide 9</li>
  <li>Slide 10</li>
</ul>

CSS

/* Basic carousel CSS */
.css-carousel {
  /* Resets for carousel appearance */
  list-style: none;
  padding: 0;
  /* The only CSS necessary for a simple swiper Carousel */
  display: flex;
  overflow-inline: auto;
  /* Prevents accidental page Back/Forward */
  overscroll-behavior-inline: contain;
  /* Confines the scrolling direction */
  scroll-snap-type: inline mandatory;
  /* Leave space for dots below carousel */
  padding-block-end: 30px;
  /* Be nice to others */
  @media (prefers-reduced-motion: no-preference) { 
    /* Makes the sliding a little smoother */
    scroll-behavior: smooth;
  }
  
/** Add indicator dots **/
  /* Optionally remove the scrollbar */
  scrollbar-width: none;
  /* Using Anchor Position to place the dots. */
  anchor-name: --css-carousel__adding-dots;
  /* Create and position the dots; can also use `before` or `none` */
  scroll-marker-group: after;

  /* Define anchor scope and position the dots */
  &::scroll-marker-group {
    position-anchor: --css-carousel__adding-dots;
    position-area: block-end;
    position-visibility: always;
    position: fixed;
    /* Customize the dots appearance (will not appear otherwise) */
    display: grid;
    grid-auto-columns: 20px;
    grid-auto-flow: column;
    gap: 20px;
  }

  li {
    /* Make things look a little nicer */
    min-width: 200px;
    aspect-ratio: 1 / 1;
    border: 1px solid;
    place-content: center;
    text-align: center;
    /* Create a dot for each slide */
    &::scroll-marker {
      content: ' ';
      cursor: pointer;
      /* Customize the dots as you wish */
      aspect-ratio: 1;
      border-radius: 100%;
      border: 1px solid #000;
    }
    /* Customize the "current" dot as you wish */
    &::scroll-marker:target-current {
      background-color: #000;
    }
  }
}

JS

No JS required.

Baseline

[`scroll-target-group`](https://webstatus.dev/features/scroll-target-group)

CodePen

See the Pen on CodePen.