javascript - 刷卡轮播 : How to give different properties to the same carousel for different screen sizes

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 的销毁方法的信息。在您的情况下，您希望这样调用它: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
            });
        }
    }

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

这是一个Fiddle这样您就可以看到它的实际效果(调整框架窗口的大小)。