スライダサイズ変更時のウィンドウの幅を再計算

Question

私は、自動的にスライドする証言付きのスライダを作成しました。 Webページを初めて読み込むときに、ウィンドウの幅が計算され、この値を使用してテキストブロック全体に移動しますが、ウィンドウのサイズを変更すると前の値が維持され、すべてが不均衡になります。

主な問題は、スライダーコンテナとスライドの値がパーセントであるため、$(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

は、作業フィドルです。

はEDIT：

$(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リンクは:-)

私は、スライダーを停止マージンをリセットし、再度スライダーを実行して、サイズ変更の幅を再計算します

INFO：ここJSFiddleテストのサイズを変更するためのものです：https://jsfiddle.net/ks50njnz/1/