<h1>Slider</h1>
<div class="slider-container">
  <div class="slide active">
    <img src="https://dummyimage.com/600x370/ccc/&text=Slide 1" alt="">
  </div>
  <div class="slide">
    <img src="https://dummyimage.com/600x370/ccc/&text=Slide 2" alt="">
  </div>
  <div class="slide">
    <img src="https://dummyimage.com/600x370/ccc/&text=Slide 3" alt="">
  </div>
  <div class="slide">
    <img src="https://dummyimage.com/600x370/ccc/&text=Slide 4" alt="">
  </div>
  <div class="control-container">
    <button class="prev">
      <i class="fa fa-chevron-left"></i>
    </button>
      <div class="slide-indicator">
        <span class="indicator active"></span>
        <span class="indicator"></span>
        <span class="indicator"></span>
        <span class="indicator"></span>
      </div>
    <button class="next">
      <i class="fa fa-chevron-right"></i>
    </button>
  </div>
</div>

@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
:root {
  --font-1: "Roboto", sans-serif;
}

body {
  height: 100vh;
  background: linear-gradient(to bottom right, white, #ccc);
  background-size: 100%;
}

h1 {
  text-align: center;
  font-family: var(--font-1);
  font-size: 35px;
  text-decoration: underline;
}

.slider-container {
  display: block;
  margin: 0 auto;
  min-height: 390px;
  height: 50%;
  width: 90%;
  max-width: 600px;
  background: white;
  border-radius: 10px;
  padding: 20px 10px 40px 10px;
  overflow: hidden;
}

.slider-container .slide {
  display: none;
  height: 100%;
  width: 100%;
  margin: 0px auto;
  background: white;
  font-size: 40px;
  font-family: var(--font-1);
  text-align: center;
  align-items: center;
}

.slider-container .slide img {
  heigth: auto;
  width: 100%;
}

.slider-container .active {
  display: block;
}

.control-container {
  display: inline-flex;
  width: 100%;
}

.control-container button {
  border: none;
  border-radius: 50%;
  background: white;
  font-size: 20px;
  height: 35px;
  width: 35px;
  outline: none;
}

.control-container button:hover {
  background: #ccc;
}

.slide-indicator {
  width: 100%;
  display: flex;
  justify-content: center;
}

.slide-indicator .indicator {
  height: 20px;
  width: 20px;
  transition: background 0.5s ease;
  background: #ccc;
  margin: 5px;
  display: inline-block;
  border-radius: 50%;
}

.slide-indicator .indicator:hover {
  background: darkgrey;
}

.slide-indicator .active {
  background: grey;
}
let slides = document.querySelectorAll(".slide");
let indicator = document.querySelectorAll(".indicator");
let prev = document.querySelector(".prev");
let next = document.querySelector(".next");

let index = 0;

for (let i = 0; i < slides.length; i++) {
  if (slides[i].classList.contains("active")) {
    index = i
  }
}

prev.onclick = prevSlide;
next.onclick = nextSlide;

indicator.forEach(x => {
  x.onclick = display;
});

function display() {
  let num;
  for (let i = 0; i < indicator.length; i++) {
    indicator[i].classList.remove("active");
    slides[i].classList.remove("active");
  }
  this.classList.add("active");
  for (let i =0; i < indicator.length; i++) {
    if (indicator[i].classList.contains("active")) {
     num = i;
    }
  }
  slides[num].classList.add("active");
  index = num;
}

function prevSlide() {
  slides[index].classList.remove("active");
  indicator[index].classList.remove("active");
  index--;
  console.log(index);
  if (index < 0) {
    index = slides.length - 1;
  }
  slides[index].classList.add("active");
  indicator[index].classList.add("active");
}

function nextSlide() {
  slides[index].classList.remove("active");
  indicator[index].classList.remove("active");
  index++;
  console.log(index);
  if (index == slides.length) {
    index = 0;
  }
  console.log(index);
  slides[index].classList.add("active");
  indicator[index].classList.add("active");
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.