html,
body {
  height: 100%;
  box-sizing: border-box;
}

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: black;
  transition: background 1s;
}

#diaporama {
  width: 80%;
  max-width: 1280px;
  position: relative;
  box-shadow: 0 10px 15px 5px rgba(0, 0, 0, 0.5);
}

#diaporama img {
  max-width: 100%;
  display: block;
}

#diaporama i {
  font-size: 2.4em;
  position: absolute;
  top: 50%;
  height: 50px;
  width: 50px;
  margin-top: -25px;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 500ms;
  color: white;
  cursor: pointer;
}

#diaporama:hover i {
  opacity: 1;
}

#diaporama .btPrev {
  left: 0px;
}

#diaporama .btNext {
  right: 0px;
}

#diaporama .btPlay {
  left: 50%;
  margin-left: -25px;
}

#diaporama p {
  color: white;
  text-align: center;
  position: absolute;
  width: 100%;
  bottom: 0px;
  font-size: 1.2em;
  font-family: Arial, Helvetica, sans-serif;
}

let base_path = "https://tech-me-up.com/tutoriels/slider/";
let diapos = [
  { image: base_path + "img/1.jpg", legende: "Foret" }, // 0
  { image: base_path + "img/2.jpg", legende: "Montagne" }, // 1
  { image: base_path + "img/3.jpg", legende: "Plaine" }, // 2
  { image: base_path + "img/4.jpg", legende: "Mer" } // 3
];
let imgActuelle = 0;
let timer;
let image = document.querySelector("#diaporama img");
let legende = document.querySelector("#diaporama p");
majImg();

let btPlay = document.querySelector("#diaporama .btPlay");
btPlay.onclick = function (e) {
  if (btPlay.classList.contains("bi-play-circle")) {
    // en lecture automatique
    btPlay.classList.remove("bi-play-circle");
    btPlay.classList.add("bi-pause-circle");
    timer = setInterval(imgSuivante, 3000);
  } else {
    // en pause
    btPlay.classList.add("bi-play-circle");
    btPlay.classList.remove("bi-pause-circle");
    clearInterval(timer);
  }
};

let btNext = document.querySelector("#diaporama .btNext");
btNext.onclick = imgSuivante;

function imgSuivante(e) {
  imgActuelle++;
  if (imgActuelle > diapos.length - 1) imgActuelle = 0;
  majImg();
}

let btPrev = document.querySelector("#diaporama .btPrev");
btPrev.onclick = function (e) {
  imgActuelle--;
  if (imgActuelle < 0) imgActuelle = diapos.length - 1;
  majImg();
};

function majImg() {
  image.className = "";
  image.style.opacity = "0";
  image.setAttribute("src", diapos[imgActuelle].image);
  legende.innerHTML = diapos[imgActuelle].legende;
  image.setAttribute("alt", diapos[imgActuelle].legende);
  setTimeout(function () {
    image.className = "animate__animated animate__fadeIn";
  }, 200);
  let r = Math.round(Math.random() * 255);
  let v = Math.round(Math.random() * 255);
  let b = Math.round(Math.random() * 255);
  document.body.style.background = `rgb(${r},${v},${b})`;
}