I've been trying to make my carousel work with arrows manually and for it to automatically slide as well but the automatic slide part isn't working. The arrows work fine im not sure if they're the issue tho.

let diapositiveActuelle = 1;

afficherDiapositives(diapositiveActuelle);

function diapositiveSuivante(n) {
  afficherDiapositives(diapositiveActuelle += n);
}

function afficherDiapositives(n) {
  let i;
  let diapositives = document.getElementsByClassName("Galerie");

  if (n > diapositives.length) {
    diapositiveActuelle = 1;
  }
  if (n < 1) {
    diapositiveActuelle = diapositives.length;
  }

  for (i = 0; i < diapositives.length; i++) {
    diapositives[i].style.display = "none";
  }

  diapositives[diapositiveActuelle - 1].style.display = "block";
}

setInterval(function() {
  diapositiveActuelle++;
  afficherDiapositives(diapositiveActuelle);
}, 3000);

.Galerie {
  display: none
}

img {
  vertical-align: middle;
}

.Carousel {
  max-width: 70%;
  position: relative;
  margin: auto;
  transition: scale 1000ms;
  cursor: zoom-in;
}

.Carousel :hover {
  scale: 110%;
}

.avant,
.suivant {
  cursor: pointer;
  position: absolute;
  top: 60%;
  width: auto;
  padding: 16px;
  margin-top: -10vh;
  color: white;
  font-size: 3vh;
}

.suivant {
  right: 0;
  border-radius: 3px 0 0 3px;
}

<div class="Carousel">

  <div class="Galerie " style="display: block;">

    <img src="/200/300" style="width:100%">
  </div>

  <div class="Galerie ">
    <img src="/id/237/200/300" style="width:100%">
  </div>

  <div class="Galerie ">
    <img src="/seed/picsum/200/300" style="width:100%">
  </div>

  <div class="Galerie ">
    <img src="/200/300?grayscale" style="width:100%">
  </div>

  <div class="Galerie ">
    <img src="/id/870/200/300?grayscale&blur=2" style="width:100%">
  </div>

  <div class="Galerie ">
    <img src="/200/300/?blur" style="width:100%">
  </div>

  <a class="avant" onclick="diapositiveSuivante(-1)">&#10094</a>
  <a class="suivant" onclick="diapositiveSuivante(1)">&#10095</a>

</div>