滑动式传送带：如何针对不同的屏幕尺寸为同一个传送带赋予不同的属性

Question

我正在尝试创建一个轮播，在桌面上具有4x1的布局，在移动设备上具有2x2的布局。

这是代码，但对我来说却打破了轮播。

  var swiper1;
$(window).resize(function() {
    var ww = $(window).width();

    if (ww <= 767) {
        swiper1 = new Swiper('#swiper2', {

                slidesPerView: 2,
                slidesPerColumn: 2,
                spaceBetween: 10
            }
        );
    }
    else {
        swiper1 = new Swiper('#swiper2', {

                slidesPerView: 4,
                slidesPerColumn: 1,
                spaceBetween: 30
            }
        );
    }
});

最初，代码过去只是这样：

var swiper1 = new Swiper('#swiper2', {
                slidesPerView: 4,
                slidesPerColumn: 1,
                spaceBetween: 30
});

这就是我的工作，但是当分辨率为<= 767时，我希望将其更改为2x2

Answer 1

创建新实例之前，您必须销毁旧的Swiper实例。在Swiper API Docs中，“方法”部分包含有关Swiper的destroy方法的信息。在您的情况下，您想这样称呼它：swiper1.destroy(true, true);。

您更新的JavaScript可能如下所示：

   $(function () {
        createSwiper();

        $(window).resize(function () {
            createSwiper()
        });
    });

    function createSwiper() {
        var swiper1 = $('#swiper2')[0].swiper;
        if (typeof swiper1 !== 'undefined') 
            swiper1.destroy(true, true); //if swiper exists, destroy it so we can create a new one 

        var ww = $(window).width();
        if (ww <= 767) {
            swiper1 = new Swiper('#swiper2', {
                slidesPerView: 2,
                slidesPerColumn: 2,
                spaceBetween: 10
            });
        } else {
            swiper1 = new Swiper('#swiper2', {
                slidesPerView: 4,
                slidesPerColumn: 1,
                spaceBetween: 30
            });
        }
    }

我将create swiper逻辑放在其自己的函数中，并在页面加载时调用它，并将其附加到窗口调整大小事件。

这里是Fiddle，因此您可以在操作中看到它（调整框架窗口的大小）。

Answer 2

根据文档，您现在可以使用断点为不同的屏幕尺寸提供不同的参数。由于Swiper Docs没有锚点，因此请在“滑动参数”部分中搜索“断裂点”。

您的情况是：

  var swiper1 = new Swiper('#swiper2', {
    slidesPerView: 2,
    slidesPerColumn: 2,
    spaceBetween: 10
    // ...
    breakpoints: {
      // when window width is >= 767px
      767: {
         slidesPerView: 4,
         slidesPerColumn: 1,
         spaceBetween: 30,
      }
    }
  });

Note：文档显示，在断点内您只能使用一部分参数，这些参数不会过分改变轮播的行为。