Aquí,

Hice un control deslizante con Bootstrap y funciona bien, pero me gustaría que los valores cambiaran si el usuario gira su tableta, por ejemplo.

Mi código:

 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();

Después del cambio de tamaño, al hacer clic, el código se ejecuta dos veces. Una vez con las tallas antiguas y otra con las tallas actualizadas.

¿Un alma caritativa que me guíe?

Gracias por adelantado !!