<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=s, initial-scale=1.0">
  <title>Carousel</title>
  <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap" rel="stylesheet">
  <link href="./app.css" rel="stylesheet">
</head>

<body>
  <div class="container">
    <div class="carouselContainer">
      <div class="carouselImgs slide1">
        <h1>Slide1</h1>
      </div>
      <div class="carouselImgs slide2">
        <h1>Slide2</h1>
      </div>
      <div class="carouselImgs slide3">
        <h1>Slide3</h1>
      </div>
      <div class="carouselImgs slide4">
        <h1>Slide4</h1>
      </div>
      <span class="prev" id="prev">
        < </span>
          <span class="next" id="next">
            > </span>
    </div>
  </div>

  <script src=app.js></script>
</body>

</html>
* {
  margin: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Source Sans Pro', sans-serif;
}

h1 {
  font-size: 3rem;
}

.container {
  width: 100%;
  height: 100vh;
  background-color: #4a9e961f;
  display: flex;
  align-items: center;
  justify-items: center;
}

.carouselContainer {
  width: 60%;
  height: 90%;
  margin: 0 auto;
  position: relative;
  background-color: #fff;
  border-radius: 1.5rem;
  overflow: hidden;
}

.carouselImgs {
  width: 100%;
  height: 100%;
  animation: fade 1.5s;
  display: none;
  padding: 20px;
  text-align: center;
  align-items: center;
  justify-items: center;
  justify-content: center;
}

.prev, .next {
  position: absolute;
  top: 49%;
  cursor: pointer
}

.prev {
  left: 10px;
}

.next {
  right: 10px;
}

@keyframes fade {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}

.slide1 {
  background-color: #d8e2dc
}

.slide2 {
  background-color: #577399
}

.slide3 {
  background-color: #bdd5ea;
}

.slide4 {
  background-color: #f7f7ff;
}
var currentSlide = 1;


function showSlide(slideIndex) {
  const slides = document.getElementsByClassName('carouselImgs');
  if (slideIndex > slides.length) { currentSlide = 1 }
  if (slideIndex < 1) { currentSlide = slides.length }
  for (var i = 0; i < slides.length; i++) {
    slides[i].style.display = 'none'
  }
  slides[currentSlide - 1].style.display = 'flex'
}


function nextSlide() {
  showSlide(currentSlide += 1);
}

function previousSlide() {
  showSlide(currentSlide -= 1);
}

window.onload = function () {
  showSlide(currentSlide);
  document.getElementById('prev').addEventListener('click', function () {
    previousSlide();
  })
  document.getElementById('next').addEventListener('click', function () {
    nextSlide();
  })
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.