小さな画面でのみ動作するコンテンツスライダの作成

Question

画面サイズが640ピクセルより小さい場合にのみ動作する画像スライダを作成しようとしています。画面の幅が640より大きい場合は、幅が33％の3つの項目が表示されるので、画面にうまく収まります。私はそれらをスライドさせることを達成しましたが、もし私が640ピクセル以上の大きさに戻ってサイズを戻したら、スライダが凍って3枚の画像が歪んでしまいます。 1つの画面サイズでのみスライダを動作させる方法はありますか？以下のコードは、これまでのところ私が得たものですが、似たような仕事は誰も見つけられません。

のjQueryコード

var slider = $("#slider") 
    var container = $("#slides"); 
    var slides = $(".slides"); 
    var len = 3; 
    var current = 1; 
    var width = '100%'; 
    var animationSpeed = 3000; 
    var pause = 3000; 
    var interval; 

    function startSlider() { 
     interval = setInterval(function() { 
       container.animate({ 
        'margin-left': '-=' + width 
       }, animationSpeed, function() { 
        if (++current === len) { 
         current = 1; 
         container.css('margin-left', 0); 
        } 
       }); 
      }, pause); 
    } 

    function stopSlider(){ 
     clearInterval(interval); 
    } 

    function checkView() { 
     var winWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; 
     if(winWidth < 640 ) { 
      startSlider(); 
     } else{ 

      stopSlider(); 
     } 

    } 
    checkView(); 
    $(window).resize(checkView); 

HTMLコード

<section id="slider" class="slider clearfix"> 
     <nav class="nav-arrow"> 
      <img id="#prev" class="prev" src="images/1463330656_br_prev.png" alt="prev"> 
      <img id="#next" class="next" src="images/1463330669_br_next.png" alt="next"> 
     </nav> 
    <ul id="slides" class="slides"> 
     <li><img class="slide" src="images/box.jpg" alt=""></li> 
     <li><img class="slide" src="images/bridge.jpg" alt=""></li> 
     <li><img class="slide" src="images/smile.jpg" alt=""></li> 
    </ul> 
</section> 

Answer 1

にハードコーディングサイズとは対照的に、あなたは本当にCSSメディアクエリに応じてコンテンツや 'CheckView' をリサイズする必要がありますあなたのjquery。

あなたのCSSの最後に複数のメディアクエリを追加して、サイズを調整することができます。

@media only screen and (min-width:320px) and (max-width:640px){ // your necessary css here} 
@media only screen and (min-width:1024px){ // your necessary css here} 

注：これらは一例である