Stop propagation click on arrow caroussel javascript

(() => {
  const arrowPrevious = document.querySelector(".chevron__previous");
  const arrowNext = document.querySelector(".chevron__next");
  const carousselPictures = document.querySelector(".caroussel__pictures");
  const caroussel = document.querySelector(".caroussel");
  const interval = document
    .querySelector(".caroussel__pictures")
    .getAttribute("data-interval");
  const size = 1000;

  const nextSlide = () => {
    carousselPictures.style.transform = "translateX(" + -size + "px)";
    setTimeout(() => {
      carousselPictures.appendChild(carousselPictures.firstElementChild);
      carousselPictures.style = "left: 0; transition: none !important;";
    }, 1000);

    setTimeout(() => {
      carousselPictures.style = "left: 0;";
    }, 1020);
  };

  const previousSlide = () => {
    setTimeout(() => {
      carousselPictures.prepend(carousselPictures.lastElementChild);
      carousselPictures.style =
        "left: " + -size + "px !important; transition: none !important;";
    }, 1);

    setTimeout(() => {
      carousselPictures.style.transform = "translateX(" + -size + "px)";
      carousselPictures.style = "transition: all 1s ease-out !important;";
    }, 2);
  };

  arrowPrevious.addEventListener("click", (e) => {
    previousSlide();
    e.stopImmediatePropagation();
  });

  arrowNext.addEventListener("click", (e) => {
    nextSlide();
  });

  let timer = setInterval((e) => {
    nextSlide();
  }, parseInt(interval) + 40);

  caroussel.addEventListener("mouseenter", (e) => {
    clearInterval(timer);
  });

  caroussel.addEventListener("mouseleave", (e) => {
    timer = setInterval(() => {
      nextSlide();
    }, parseInt(interval) + 40);
  });
})();

// slider();
@import url(reset.css);

html, body{
    font-size: 16px;
    font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

.container{
    width: 1000px;
    margin: 0 auto;
}

.title__h1{
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: 0.25rem;
    margin: 2rem 0;
    text-align: center;
}

.caroussel, .caroussel__pictures{
    width: 1000px;
    height: 400px;
    transition: all 1s ease-out !important;
}

.picture{
    position: relative;
}

.caroussel{
    overflow: hidden;
    position: relative;
}

.caroussel__pictures{
    display: flex;
    position: relative;
    left: 0;
}

.transition__toggle{
    transition: none !important;
}

.arrow{
    position: absolute;
    width: calc(100% - 2rem);
    display: flex;
    justify-content: space-between;
    align-items: center;
    top: calc(50% - (48px / 2));
    padding: 0 1rem;
}

.chevron__previous, .chevron__next{
    color: #fff;
    font-size: 48px;
    cursor: pointer;
}
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
      integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link rel="stylesheet" href="css/style.css" />

    <title>Caroussel javascript</title>
  </head>
  <body>
    <div class="container">
      <h1 class="title__h1">Caroussel javascript</h1>

      <div class="caroussel">
        <div class="caroussel__pictures" data-interval="2000">
                <img src="https://picsum.photos/id/10/1000/400" alt="image caroussel 1" class="picture" />
          <img src="https://picsum.photos/id/11//1000/400" alt="image caroussel 2" class="picture" />
          <img src="https://picsum.photos/id/12//1000/400" alt="image caroussel 3" class="picture" />
          <img src="https://picsum.photos/id/13//1000/400" alt="image caroussel 4" class="picture" />
        </div>
        <div class="arrow">
          <i class="fa-solid fa-chevron-left chevron__previous"></i>
          <i class="fa-solid fa-chevron-right chevron__next"></i>
        </div>
      </div>
    </div>
    <script src="script/script.js"></script>
  </body>
</html>

Good morning,

I have a problem with a carousel, it works more or less well but I cannot stop the click event between each slide of the carousel, if I click several times on the arrows, the carousel does not work correctly, I I think the click event is propagating, but stopPropation() doesn’t work, I’m not sure I’m going in the right direction. Here is my code. Thank you in advance

    <!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
      integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link rel="stylesheet" href="css/style.css" />

    <title>Caroussel javascript</title>
  </head>
  <body>
    <div class="container">
      <h1 class="title__h1">Caroussel javascript</h1>

      <div class="caroussel">
        <div class="caroussel__pictures" data-interval="2000">
          <img src="assets/images/caroussel-5.jpg" alt="image caroussel 1" class="picture" />
          <img src="assets/images/caroussel-6.jpg" alt="image caroussel 2" class="picture" />
          <img src="assets/images/caroussel-3.jpg" alt="image caroussel 3" class="picture" />
          <img src="assets/images/caroussel-4.webp" alt="image caroussel 4" class="picture" />
        </div>
        <div class="arrow">
          <i class="fa-solid fa-chevron-left chevron__previous"></i>
          <i class="fa-solid fa-chevron-right chevron__next"></i>
        </div>
      </div>
    </div>
    <script src="script/script.js"></script>
  </body>
</html>


    (() => {
  const arrowPrevious = document.querySelector(".chevron__previous");
  const arrowNext = document.querySelector(".chevron__next");
  const carousselPictures = document.querySelector(".caroussel__pictures");
  const caroussel = document.querySelector(".caroussel");
  const interval = document
    .querySelector(".caroussel__pictures")
    .getAttribute("data-interval");
  const size = 1000;

  const nextSlide = () => {
    carousselPictures.style.transform = "translateX(" + -size + "px)";
    setTimeout(() => {
      carousselPictures.appendChild(carousselPictures.firstElementChild);
      carousselPictures.style = "left: 0; transition: none !important;";
    }, 1000);

    setTimeout(() => {
      carousselPictures.style = "left: 0;";
    }, 1020);
  };

  const previousSlide = () => {
    setTimeout(() => {
      carousselPictures.prepend(carousselPictures.lastElementChild);
      carousselPictures.style =
        "left: " + -size + "px !important; transition: none !important;";
    }, 1);

    setTimeout(() => {
      carousselPictures.style.transform = "translateX(" + -size + "px)";
      carousselPictures.style = "transition: all 1s ease-out !important;";
    }, 2);
  };

  arrowPrevious.addEventListener("click", (e) => {
    previousSlide();
    e.stopImmediatePropagation();
  });

  arrowNext.addEventListener("click", (e) => {
    nextSlide();
  });

  let timer = setInterval((e) => {
    nextSlide();
  }, parseInt(interval) + 40);

  caroussel.addEventListener("mouseenter", (e) => {
    clearInterval(timer);
  });

  caroussel.addEventListener("mouseleave", (e) => {
    timer = setInterval(() => {
      nextSlide();
    }, parseInt(interval) + 40);
  });
})();

// slider();