用于移动问题的 Swiper 初始化脚本

Question

我正在为一个项目使用 Swiper 6.4.10。这是我第一次使用 Swiper。该网站的一页上有多个滑块。所以我决定创建一些初始化脚本。我正在使用数据属性来创建滑块设置。每个滑块都有不同的设置。其中一项设置是运行仅在移动设备上使用滑块并在台式机或平板电脑上将其销毁。

我在这里和 Google 中阅读了很多帖子，但我就是无法正常工作。

关于这部分：

if(container){
  var initID = '#' + container;
  if(mobile){
   if(mobile_breakpoint.matches){
     var init = new Swiper(this, settings)
   } else if (!mobile_breakpoint.matches){
     var init = this.swiper.destroy();
   }
  }
  //var init = new Swiper(initID, settings)
}

当我在上面使用此代码时，所有轮播都被销毁，或者我收到一条错误消息，指出 this.swiper.destroy 是 undefined。当我运行我的代码是这样的：

if(container){
  var initID = '#' + container;
  var init = new Swiper(initID, settings)
}

然后所有轮播都正常工作。当我检查数据属性 mobile 并尝试破坏轮播时，所有轮播都停止工作。我显然漏掉了什么。

有人知道我做错了什么吗？非常感谢任何帮助！

Answer 1

else if 下的“你的错误”你忘了先初始化 swiper instance 。

这就是为什么当您取消注释此代码块时 - 页面已损坏（错误：this.swiper.destroy is undefined）。

要销毁一个实例，您首先应该创建这个实例(destroy() is a Method of swiper instance)。

const swiper = new Swiper('.swiper-container', {});
swiper.destroy();

否则你的代码就像这样写：

bla_bla.destroy(); /* Uncaught ReferenceError: bla_bla is not defined */

创建实例（您的代码中缺少）
摧毁

else if (!mobile_breakpoint.matches){
   var init = new Swiper(this, settings) /* missing in your code */
   init = this.swiper.destroy();
}

总的来说-你的代码很长==>下次create a Minimal, Reproducible Example（很多代码与你的issue/error无关）。

用于移动问题的 Swiper 初始化脚本

Swiper init script for mobile issue

javascript

jquery

swiper

swiperjs