0

我想做的很简单，至少我是这么想的。Swiper.js API 记录了一个布尔参数，该参数被称为init允许禁用 swiper 的自动初始化。

我想做的是像这样全局定义刷卡器：

const carousel = new Swiper(".swiper-container" , {
    freeMode: true,
    slidesPerView: "auto",
    init: false,
});

并在点击卡片时对其进行初始化，如下所示：

$(".card").click(function(){
    carousel.init();
});

这样做的问题是浏览器抛出错误并且脚本不起作用。这是错误：

无法读取未定义的属性“推送”

不知道是什么问题，因为Swiper API明确说明设置init参数为false后，可以通过调用手动初始化carousel.init()

4

1 回答 1

0

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

首先，您需要在函数中声明您的 swiper，如下所示：

function carouselProperties() {
    return new Swiper(".swiper-container", {
        init: false,
        freeMode: true,
        slidesPerView: "auto",
    });
}

之后，我们进入应该调用 swiper 的函数内部，在本例中为单击事件侦听器。

$(".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();
});

回顾一下：

  1. 您定义一个返回 swiper 及其属性的函数。
  2. 您在需要检索 swiper 信息的所有其他函数中调用该函数。

我希望这对和我有同样问题的人有所帮助。

于 2020-10-06T20:53:59.427 回答