Slick Slider reaktionsfähige Anzahl von Produkten pro Folie

Question

Meine Frage ist die effektivste Methode, um eine Anzahl von Produkten pro Folie zu zeigen, und wenn die reaktiven Breakpoints kommen, reduzieren sich die Spalten und die Produkte pro Folie reduzieren sich ebenfalls. Dies würde dann erhöhen die Anzahl der Folien, wie wir Bildschirmgröße zusammenbrechen.

Also wenn wir mit 2 Reihen von 4 beginnen (8 Produkte pro Folie), dann zeigen wir auf mittlerer Größe 2 Spalten mit 3 (6 Produkte pro Folie) und dann auf Handy, 2 Spalten mit 2 Produkten eine Folie (4 gesamt).

Wir können einige JS schreiben auf Resize und Streifen aus der Dia-Wrapper und neu zuweisen die Wrapper ausführen, um die Ergebnisse zu erhalten, die wir wollen.

Der andere Weg wäre, eine Server-Anfrage auf Größe zu schreiben, um die Daten zu schreiben (nicht positiv, wie anspruchsvoll dies werden könnte).

Ich legte eine JSFiddle zusammen, um zu zeigen, wie das Endergebnis für jedes Ansichtsfenster im Allgemeinen aussehen würde.

<div class="slider"> 
    <ul class="fullslider"> 
     <!-- Start Slide One --> 
     <div class="single-product"><img src="http://placekitten.com/400/400"></div> 
     <div class="single-product"><img src="http://placekitten.com/400/400"></div> 
     <div class="single-product"><img src="http://placekitten.com/400/400"></div> 
     <div class="single-product"><img src="http://placekitten.com/400/400"></div> 
     <!-- End Slide One on Mobile --> 
     <div class="single-product"><img src="http://placekitten.com/400/400"></div> 
     <div class="single-product"><img src="http://placekitten.com/400/400"></div> 
     <!-- End Slide One on Tablet --> 
     <div class="single-product"><img src="http://placekitten.com/400/400"></div> 
     <div class="single-product"><img src="http://placekitten.com/400/400"></div> 
     <!-- End Slide One on Desktop --> 
     <div class="single-product"><img src="http://placekitten.com/400/400"></div> 
     <div class="single-product"><img src="http://placekitten.com/400/400"></div> 
     <div class="single-product"><img src="http://placekitten.com/400/400"></div> 
     <div class="single-product"><img src="http://placekitten.com/400/400"></div> 
     <div class="single-product"><img src="http://placekitten.com/400/400"></div> 
     <div class="single-product"><img src="http://placekitten.com/400/400"></div> 
     <div class="single-product"><img src="http://placekitten.com/400/400"></div> 
     <div class="single-product"><img src="http://placekitten.com/400/400"></div> 
     <div class="single-product"><img src="http://placekitten.com/400/400"></div> 
     <div class="single-product"><img src="http://placekitten.com/400/400"></div> 
     <div class="single-product"><img src="http://placekitten.com/400/400"></div> 
     <div class="single-product"><img src="http://placekitten.com/400/400"></div> 
     <div class="single-product"><img src="http://placekitten.com/400/400"></div> 
     <div class="single-product"><img src="http://placekitten.com/400/400"></div> 
     <div class="single-product"><img src="http://placekitten.com/400/400"></div> 
     <div class="single-product"><img src="http://placekitten.com/400/400"></div> 
    </ul> 
    </div> 

Answer 1

Die effektivste und sauberste Weg zu tun, was ich denke, Sie versuchen, die responsive Einstellung des Slick Karussell zu erreichen, ist zu verwenden. Es ist viel einfacher, eine Einstellung zu verwenden, die vom Plugin selbst angeboten wird, als es manuell im resize Event zu versuchen oder es auf der Serverseite zu tun. Dies ist, wie Sie diese Einstellung verwenden würde:

$(".fullslider").slick({ 
    slidesToShow: 4, // default desktop values 
    slidesToScroll: 4, 
    rows: 2, 
    dots: true, 
    arrows: true, 
    responsive: [ 
     { 
      breakpoint: 980, // tablet breakpoint 
      settings: { 
       slidesToShow: 3, 
       slidesToScroll: 3 
      } 
     }, 
     { 
      breakpoint: 480, // mobile breakpoint 
      settings: { 
       slidesToShow: 2, 
       slidesToScroll: 2 
      } 
     } 
    ] 
}); 

Die Haltepunkte repräsentieren die Anzahl der Pixel, an welchem ​​Punkt man sich wünschen kann einige Einstellungen zu ändern. In Ihrem Fall möchten Sie die Anzahl der anzuzeigenden Folien ändern und einen Bildlauf durchführen, wenn der Benutzer von einem Tablet oder Telefon aus eine Ansicht anzeigt. Aber Sie möchten die anderen Einstellungen nicht ändern, wie zum Beispiel rows, also setzen Sie es nicht in den Breakpoint settings; es wird 2. bleiben

JSFiddle example