Erstellen eines Inhalts-Schiebereglers, der nur auf kleinen Bildschirmen funktioniert

Question

Ich versuche einen Bild-Schieberegler zu erstellen, der nur funktioniert, wenn die Bildschirmgröße kleiner als 640 Pixel ist. Wenn der Bildschirm breiter als 640 ist, zeigt er 3 Einträge mit 33% Breite, so dass er gut auf dem Bildschirm passt. Ich habe es geschafft, sie zu gleiten, aber wenn ich wieder auf größere als 640 Pixel Größe und Intervall löschen, erstarrt der Slider gerade und lässt mich verzerrt 3 Bilder. Gibt es eine Möglichkeit, Schieberegler nur auf einer Bildschirmgröße arbeiten zu lassen? Der folgende Code ist, was ich bis jetzt bekommen habe, aber ich habe einfach keine ähnliche Aufgabe gefunden, oder jemanden gesehen, der es auf Google gemacht hat.

JQuery-Code

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-Code

<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

Sie sollten wirklich den Inhalt oder 'Checkview' nach CSS Media Queries der Größe als zu harten Kodierung Größen im Gegensatz zu deine jQuery.

Sie können mehrere Medienabfragen an das Ende Ihres CSS angehängt haben, wo Sie die Größe entsprechend anpassen können, z.

@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} 

Anmerkung: Dies sind nur Beispiele