Swiper 初始化不起作用（无法读取未定义的属性“推送”）

Question

我想做的事情真的很简单，或者我是这么想的。Swiper.js API 记录了一个布尔参数，该参数init允许禁用刷卡器的自动初始化。我想做的是像这样在全球范围内定义滑动器：const carousel = new Swiper(".swiper-container" , {    freeMode: true,    slidesPerView: "auto",    init: false,});并在单击卡片时对其进行初始化，如下所示：$(".card").click(function(){    carousel.init();});这样做的问题是浏览器会抛出错误并且脚本无法运行。这是错误：无法读取未定义的属性“推送”我不知道是什么问题，因为Swiper API明确指出，将参数设置init为false后，您可以通过调用手动初始化它carousel.init()

Answer 1

看来我可能已经解决了这个问题。似乎即使您全局声明了 swiper，swiper.js 也无法访问它，因为一些奇怪的原因，所以我找到了一个解决方法。也许这是设计它的方式，但至少对我来说，它没有什么意义。

首先，您需要在一个函数中声明您的刷卡器，如下所示：

function carouselProperties() {

    return new Swiper(".swiper-container", {

        init: false,

        freeMode: true,

        slidesPerView: "auto",

    });

}

之后我们进入应该调用滑动器的函数内部，在本例中是点击事件监听器。

$(".card").click(function(){

    // Here we define a variable that returns the swiper

    const carousel = carouselProperties()

    // Afte we define this variable we can finally call the init function

    carousel.init();

});

回顾一下：

您定义一个返回滑动器及其属性的函数。

您在所有其他需要检索刷卡信息的函数中调用该函数。

我希望这能帮助任何和我有同样问题的人。