每張幻燈片的滑動滑塊響應產品數量

Question

我的問題是最有效的方法來顯示每張幻燈片的產品數量，然后隨着響應斷點的出現，色譜柱數量減少，每張幻燈片的產品數量也會減少。 然后，當我們細分屏幕尺寸時，這將增加幻燈片的數量。

因此，如果我們從2行開始，每行4個（每張幻燈片8個產品），那么在中等尺寸的情況下，我們將顯示2列，每行3個（每張幻燈片6個產品），然后在移動廣告中顯示2個列，每行2個產品一張幻燈片（共4個）。

我們可以編寫一些JS來調整大小並剝離幻燈片包裝紙，然后重新分配包裝紙以獲得所需的結果。

另一種方法是在調整大小后運行服務器請求以寫入數據（對於如何獲得要求不是肯定的）。

我將JSFiddle放在一起以顯示每個視口的最終結果通常是什么樣的。

  <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

我認為您要實現的最有效，最干凈的方法是使用光滑輪播的responsive設置。 使用插件本身提供的設置比嘗試在resize事件中手動進行resize或在服務器端進行設置要容易得多。 這是您使用此設置的方式：

$(".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
            }
        }
    ]
});

斷點代表您要更改某些設置的像素數。 對於您的情況，您想更改在用戶從平板電腦或手機查看時要顯示和滾動的幻燈片數量。 但是您不想更改其他設置，例如rows ，因此不要在斷點的settings ； 它將保持2。

JSFiddle示例