<body class="flexc">
  <div class="carousel-container flexc">
    <div class="left-arrow" onclick="moveLeft()">
      <h1 class="flexc">&lt;</h1>
    </div>

    <div class="image-container flexc" style="flex-direction: column;">
      <img src="https://source.unsplash.com/random" alt="image" />
      <img src="https://source.unsplash.com/featured/?nature" alt="image" />
      <img src="https://source.unsplash.com/featured/?cat" alt="image" />
      <div>
        <ul class="dotList"></ul>
      </div>
    </div>

    <div class="right-arrow" onclick="moveRight()">
      <h1 class="flexc">&gt;</h1>
    </div>
  </div>

  <script src="https://use.fontawesome.com/2f5189959d.js"></script>
</body>
body {
  min-height:100vh;
}
.flexc {
  display: flex;
  justify-content: center;
  align-items: center;
}
.carousel-container .image-container {
  margin: 5px;
  padding: 5px;
}
.carousel-container .image-container img {
  width: 500px;
  height: 300px;
  margin: 5px;
  padding: 5px;
}
.carousel-container .image-container div ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.carousel-container .image-container div ul li {
  display: inline;
  margin: 3px;
  color: grey;
  cursor: pointer;
}
.carousel-container .left-arrow,
.carousel-container .right-arrow {
  cursor: pointer;
}
.carousel-container .left-arrow h1,
.carousel-container .right-arrow h1 {
  border: 2px solid black;
  border-radius: 50%;
  height: 30px;
  width: 30px;
  margin: 5px;
  padding: 5px;
}
@media only screen and (max-width: 600px) {
  .carousel-container .image-container img {
    width: 200px;
    height: 150px;
  }
}
//get all the images and li from HTML
var carouselImages = document.getElementsByTagName("img");
var dotNode = document.getElementsByTagName("li");
var currentIndex = 0;

//create dots/circle
for (let i = 0; i < carouselImages.length; i++) {
  let newDot = document.createElement("li");
  
  newDot.className = "fa fa-circle";
  newDot.setAttribute("onclick", "dotClick(this.id)");
  newDot.setAttribute("id", parseInt(i));
  
  let dotContainer = document.querySelector(".dotList");
  dotContainer.appendChild(newDot);
}

//function1
function displayImage() {
  for (let j = 0; j < carouselImages.length; j++) {
    carouselImages[j].style.display = "none";
  }
  carouselImages[currentIndex].style.display = "block";
}

//function2
function displayDot() {
  for (let j = 0; j < dotNode.length; j++) {
    dotNode[j].style.color = "grey";
  }
  dotNode[currentIndex].style.color = "black";
}

//function3
function moveLeft() {
  if (currentIndex == 0) {
    currentIndex = carouselImages.length - 1;
  } else {
    currentIndex--;
  }
  
  displayImage();
  displayDot();
}

//function4
function moveRight() {
  if (currentIndex == carouselImages.length - 1) {
    currentIndex = 0;
  } else {
    currentIndex++;
  }
  
  displayImage();
  displayDot();
}

//function5
function dotClick(c) {
  currentIndex = c;
  displayImage();
  displayDot();
}

//initial stage
displayImage();
displayDot();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.