I there,

I made a slider using Bootstrap and it works fine but I would like the values to change if the user rotates his tablet for example.

My Code:

var rtime;
var timeout = false;
var delta = 200;
$(window).resize(function() {
    rtime = new Date();
    if (timeout === false) {
        timeout = true;
        setTimeout(resizeend, delta);
    }
});
function resizeend() {
if (new Date() - rtime < delta) {
    setTimeout(resizeend, delta);
} else {
    timeout = false;
if($(".carousel-inner").scrollLeft() > 0)
{
  $("#lives_slider .carousel-inner").animate(
    { scrollLeft: 0 },
    600
  );
}

  var carouselWidth = $(".carousel-inner")[0].scrollWidth;
  var cardWidth = $(".carousel-item").width();
  var scrollPosition = 0;
    var multipleCardCarousel = document.querySelector(
      "#lives_slider" 
    );
    if (window.matchMedia("(min-width: 768px)").matches) {
      var carousel = new bootstrap.Carousel(multipleCardCarousel, {
        interval: false,
      });
      $("#lives_slider .carousel-control-next").on("click", function () {
        if (carouselWidth - scrollPosition - (cardWidth * 4) > 1){
          scrollPosition += cardWidth*4;
          console.log('Scroll : '+scrollPosition+'CardWidth : '+cardWidth);
          $("#lives_slider .carousel-inner").animate(
            { scrollLeft: scrollPosition },
            600
          );
        }
      });
      $("#lives_slider .carousel-control-prev").on("click", function () {
        if (scrollPosition > 0) {
          scrollPosition -= cardWidth*4;
          $("#lives_slider .carousel-inner").animate(
            { scrollLeft: scrollPosition },
            600
          );
        }
      });
    } else {
      $(multipleCardCarousel).addClass("slide");
    }
}               
}

resizeend();

After the resize, on click, the code is executed twice. Once with the old sizes, and once with the updated sizes.

A charitable soul to guide me ?

Thanks in advance !!