Question

我的问题是以最有效的方式显示每张幻灯片的大量产品，然后随着响应断点的出现，列减少，每张幻灯片的产品也减少了。然后，当我们按屏幕尺寸细分时，这将增加幻灯片的数量。

因此，如果我们从2行4开始（每张幻灯片8个产品），那么在中等大小我们显示2列3（每个幻灯片6个产品），然后在移动，2列，2个产品幻灯片（总共4个））。

我们可以编写一些JS来运行resize并去掉幻灯片包装器并重新分配包装器以获得我们想要的结果。

另一种方法是在调整大小时运行服务器请求来写入数据（对于这可能会有多大的要求不是肯定的。）

我将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 example

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

1 个答案: