調整大小時滑塊重新計算窗口寬度

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/