Slick Slider 响应每张幻灯片的产品数量

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

要实现我认为您想要实现的目标，最有效、最简洁的方法是使用 slick carousel 的 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
            }
        }
    ]
});

断点表示您想要更改某些设置的像素数。在您的例子中，您想要更改当用户从平板电脑或 phone 查看时要显示和滚动的幻灯片数量。但是您不想更改其他设置，例如 rows，所以不要在断点的 settings 中设置它；它将保持 2.

JSFiddle example

Slick Slider 响应每张幻灯片的产品数量

Slick Slider responsive number of products per slide

javascript

ajax

slick.js