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

Question

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

主要问题是滑块容器和幻灯片的值是百分比的，所以尝试$(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(); 
}); 

Answer 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(){ 
 
     \t clearInterval(interval); 
 
     \t 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/