Horizontal Carousel

<div class="nuda-carh">
  <div class="nuda-carh__viewport">
    <div class="nuda-carh__track">
      <div class="nuda-carh__slide" style="background:#ff5e7a"></div>
      <div class="nuda-carh__slide" style="background:#ffb45e"></div>
      <div class="nuda-carh__slide" style="background:#e4ff54"></div>
      <div class="nuda-carh__slide" style="background:#62b6ff"></div>
    </div>
  </div>
  <div class="nuda-carh__dots">
    <span></span><span class="is-on"></span><span></span><span></span>
  </div>
</div>

const root  = document.querySelector('.nuda-carh');
const track = root.querySelector('.nuda-carh__track');
const dots  = root.querySelectorAll('.nuda-carh__dots span');
let index = 0;

const go = (i) => {
  index = (i + dots.length) % dots.length;
  track.style.transform = `translateX(-${index * 100}%)`;
  dots.forEach((d, n) => d.classList.toggle('is-on', n === index));
};

dots.forEach((d, i) => d.addEventListener('click', () => go(i)));
setInterval(() => go(index + 1), 3500);

.nuda-carh {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 240px;
}

.nuda-carh__viewport {
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.06);
}

.nuda-carh__track {
  display: flex;
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}

.nuda-carh__slide {
  flex: 0 0 100%;
  height: 120px;
}

.nuda-carh__dots {
  display: flex;
  justify-content: center;
  gap: 5px;
}

.nuda-carh__dots span {
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: rgba(255,255,255,.16);
  transition: width .35s cubic-bezier(.16,1,.3,1),background .25s;
}

.nuda-carh__dots span.is-on {
  width: 18px;
  background: #e4ff54;
}