问旋转木马上的圆点

EN

.index {
  background-color: var(--color-blue);
}

.container {
  display: flex;
  overflow: auto;
  outline: 10px solid black;
  flex: none;
}

.container.x {
  width: 100%;
  flex-flow: row nowrap;
}

.x.mandatory-scroll-snapping {
  scroll-snap-type: x mandatory;
}

.container > div {
  text-align: center;
  scroll-snap-align: center;
  flex: none;
}

.carousel-card {
  width: 100vw;
  height: 30rem;
}

h1 {
  color: blue;
}

h2 {
  color: red;
}

h3 {
  color: green;
}

h1, h2, h3 {
  font-size: 10rem
}

<div class="index">
  <div class="container x mandatory-scroll-snapping" dir="ltr">
          <div id="cardOne" class="carousel-card">
                    <h1>ONE</h1>
          </div>
                  <div id="cardTwo" class="carousel-card">
                    <h2>TWO</h2>
          </div>
                  <div id="cardThree" class="carousel-card">
                    <h3>THREE</h3>
          </div>
  </div>
</div>

<ul>
<li><a href="#cardOne">One</a></li>
<li><a href="#cardTwo">Two</a></li>
<li><a href="#cardThree">Three</a></li>
</ul>

let activeDots = document.querySelectorAll('.dot');

activeDots.forEach(activeDot => {
  activeDot.addEventListener('click', e => {
    document.querySelector('.dot.active').classList.remove('active');
    e.target.classList.add('active');
  });
});

::-webkit-scrollbar {
  display: none;
}

html {
  scroll-behavior: smooth;
}

ul {
  list-style: none;
}

.dots-container {
  display: flex;
  justify-content: center;
}

ul.dots {
  display: flex;
}

.dots li+li {
  margin-left: .5rem;
}

.active {
  color: yellow;
}

.index {
  background-color: var(--color-blue);
  height: 85vh;
}

.container {
  display: flex;
  overflow: auto;
  flex: none;
}

.container.x {
  width: 100%;
  flex-flow: row nowrap;
}

.x.mandatory-scroll-snapping {
  scroll-snap-type: x mandatory;
}

.container>div {
  text-align: center;
  scroll-snap-align: center;
  flex: none;
}

.carousel-card {
  width: 100vw;
  height: 23rem;
}

h1 {
  color: blue;
}

h2 {
  color: red;
}

h3 {
  color: green;
}

h1,
h2,
h3 {
  font-size: 10rem
}

.dot::before {
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

.dot::before {
  font: var(--fa-font-solid);
  content: "\f111";
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">

<div class="index">
  <div class="container x mandatory-scroll-snapping" dir="ltr">
    <div id="cardOne" class="carousel-card">
      <h1>ONE</h1>
    </div>
    <div id="cardTwo" class="carousel-card">
      <h2>TWO</h2>
    </div>
    <div id="cardThree" class="carousel-card">
      <h3>THREE</h3>
    </div>
  </div>
  <div class="dots-container">
    <ul class="dots">
      <li>
        <a class="dot active" href="#cardOne"></a>
      </li>
      <li>
        <a class="dot" href="#cardTwo"></a>
      </li>
      <li>
        <a class="dot" href="#cardThree"></a>
      </li>
    </ul>
  </div>
</div>