jQuery在调整大小时更新值



我在那里,

我使用Bootstrap制作了一个滑块,效果很好,但如果用户旋转他的平板电脑,我希望这些值可以改变。

我的代码:

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

调整大小后,单击,代码将执行两次。一次是旧尺寸,一次是更新尺寸。

一个善良的灵魂来指引我?

提前感谢!!

有人吗?:/只要告诉我路径,我自己做,请

最新更新