Jquery 滑块在调整大小时重新计算窗口宽度

我已经建立了一个滑块与证词，幻灯片自动。当第一次加载网页时，它会计算窗口的宽度，并使用此值在文本块中移动，但当我调整窗口大小时，它会保持以前的值，所有内容都不平衡

主要问题是滑块容器和幻灯片的值是百分比，因此尝试

$（window）.resize（function（）{$slides.width（width）}）它没用

HTML

JQUERY

$(function(){
        //configuration
        var width=$(window).width();
        var animationSpeed = 1200;
        var pause = 3000;
        var currentSlide = 1;
        var interval;
        //cache DOM
        var $slider = $('#testimonial');
        var $slideContainer = $slider.find('.testimonial-container');
        var $slides = $slideContainer.find('.testimonials');

        function startSlider(){
            interval = setInterval(function(){
                $slideContainer.animate({'margin-left':'-='+width},animationSpeed,"easeOutQuart", function(){
                    currentSlide++;
                    if(currentSlide === $slides.length){
                        currentSlide = 1;
                        $slideContainer.css('margin-left', 0);
                        addActive();
                    }
                });
            }, pause);
        }
        startSlider();
});

这是一把小提琴

编辑：使用下面的JSFIDLE链接测试调整大小：-）

我在调整大小时重新计算宽度，停止滑块，重置边距，然后再次运行滑块：


$（函数（）{
//配置
变量宽度=$（窗口）.width（）；
var animationSpeed=1200；
var=3000；
var currentSlide=1；
var区间；
//缓存DOM
var$slideContainer=$（'.commential container'）；
var$slides=$slideContainer.find（'.commentials'）；
函数startSlider（）{
间隔=设置间隔（函数（）{
$slideContainer.animate（{'margin-left'：'-='+width}，animationSpeed，function（）{
currentSlide++；
如果（当前幻灯片==$slides.length）{
currentSlide=1；
$slideContainer.css（'margin-left'，0）；
}
});
}（停顿）；
}
startSlider（）；
$（窗口）.on（'resize'，function（））{
间隔时间；
宽度=$（窗口）.width（）；
$slideContainer.css（'marginLeft'，'0'）；
startSlider（）；
});
});
html，正文{
填充：0；
保证金：0；
}
.证明容器{
宽度：400%；
}
.推荐书{
宽度：25%；
浮动：左；
}

正文

正文

正文

正文

您是否尝试过在widow.resize上重新初始化滑块？
.testimonial-container{
    width: 400%;
}
.testimonials{
    width: 25%;
    float: left;
}

$(function(){
        //configuration
        var width=$(window).width();
        var animationSpeed = 1200;
        var pause = 3000;
        var currentSlide = 1;
        var interval;
        //cache DOM
        var $slider = $('#testimonial');
        var $slideContainer = $slider.find('.testimonial-container');
        var $slides = $slideContainer.find('.testimonials');

        function startSlider(){
            interval = setInterval(function(){
                $slideContainer.animate({'margin-left':'-='+width},animationSpeed,"easeOutQuart", function(){
                    currentSlide++;
                    if(currentSlide === $slides.length){
                        currentSlide = 1;
                        $slideContainer.css('margin-left', 0);
                        addActive();
                    }
                });
            }, pause);
        }
        startSlider();
});