每张幻灯片的滑动滑块响应产品数量

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事件中手动进行设置或在服务器端进行设置容易得多。这是您使用此设置的方式：

$(".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示例