Slider Auto | Notion

slider
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>slider</title>
</head>
<body>

<!-- css -->

    <style>
        
.slider-container {
  position: relative;
  margin: auto;
  width: 500px;
  height: 300px;
  margin-top: calc(50vh - 150px);
  margin-bottom: calc(50vh - 150px);
}
.slider {
  width: 500px;
  height: 300px;
  overflow: hidden;
  position: relative;
}

.slide {
  width: 500px;
  height: 300px;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slide.active {
  opacity: 1;
}

    </style>

<!-- affichage -->

<div class="slider-container">
    <div class="slider">
        <img class="slide" src="<https://cdn.pixabay.com/photo/2016/10/18/21/22/beach-1751455_960_720.jpg>" alt="plage">
        <img class="slide" src="<https://cdn.pixabay.com/photo/2017/02/14/03/03/ama-dablam-2064522_960_720.jpg>" alt="montagne">
        <img class="slide" src="<https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_960_720.jpg>" alt="foret">
      </div>
</div>

</body>

<!-- javascript -->

<script>

// selection des slides et du slide actuel

    const slides = document.querySelectorAll(".slide");
let currentSlide = 0;

//  fonction pour passer au slide suivant 

function nextSlide() {
  slides[currentSlide].classList.remove("active");
  currentSlide = (currentSlide + 1) % slides.length;
  slides[currentSlide].classList.add("active");
}

// interval de 3s pour changer de slide automatiquement 

setInterval(nextSlide, 3000);

</script>
</html>