调整大小时滑块重新计算窗口宽度答案

【问题标题】：slider recalculate window width when resizing调整大小时滑块重新计算窗口宽度
【发布时间】：2017-07-19 11:23:22
【问题描述】：

我已经构建了一个带有自动滑动的证词的滑块。第一次加载网页时，它会计算窗口的宽度并使用该值在整个文本块中移动，但是当我调整窗口大小时，它会保持以前的值并且一切都不平衡。

主要问题是滑块容器和幻灯片的值是百分比的，所以尝试$(window).resize(function(){$slides.width(width)});没有用。

HTML

<div class="testimonial-container">
            <div class="testimonials">
                <p>Text</p>
            </div>
            <div class="testimonials">
                <p>Text</p>
            </div>
            <div class="testimonials">
                <p>Text</p>
            </div>
            <div class="testimonials">
                <p>Text</p>
            </div>

CSS

.testimonial-container{
    width: 400%;
}
.testimonials{
    width: 25%;
    float: left;
}

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

【问题讨论】：

您是否尝试过重新启动 widow.resize 上的滑块？

标签： jquery resize slider

【解决方案1】：

这是一个有效的小提琴。

编辑：使用下面的 JSFiddle 链接测试调整大小:-)

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

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

        function startSlider(){
            interval = setInterval(function(){
                $slideContainer.animate({'margin-left':'-='+width},animationSpeed, function(){
                    currentSlide++;
                    if(currentSlide === $slides.length){
                        currentSlide = 1;
                        $slideContainer.css('margin-left', 0);
                    }
                });
            }, pause);
        }
        startSlider();
        
        $(window).on('resize', function(){
        	clearInterval(interval);
        	width=$(window).width();
            $slideContainer.css('marginLeft', '0');
            startSlider();
        });
});

html, body{
    padding:0;
    margin:0;
}
.testimonial-container{
    width: 400%;
}
.testimonials{
    width: 25%;
    float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="testimonial-container">
            <div class="testimonials">
                <p>Text</p>
            </div>
            <div class="testimonials">
                <p>Text</p>
            </div>
            <div class="testimonials">
                <p>Text</p>
            </div>
            <div class="testimonials">
                <p>Text</p>
            </div>

信息：这是用于调整大小测试的 JSFiddle： https://jsfiddle.net/ks50njnz/1/

【讨论】：