如何解决用于移动问题的 Swiper init 脚本
我在一个项目中使用 Swiper 6.4.10。这是我第一次使用 Swiper。 该网站在 1 页上有多个滑块。所以我决定创建一些初始化脚本。我正在使用数据属性来创建滑块设置。每个滑块都有不同的设置。其中一项设置是仅在移动设备上运行滑块并在台式机或平板电脑上销毁它。
我在这里和 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
并尝试销毁轮播时,所有内容都停止工作。我显然错过了一些东西。
有人知道我做错了什么吗?非常感谢任何帮助!
解决方法
else if
下的“你的错误”你忘记了初始化 swiper instance
。
这就是为什么当您取消注释此代码块时 - 页面已损坏(错误:this.swiper.destroy is undefined
)。
要销毁一个实例,您首先应该创建这个实例(destroy() 是 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(很多代码与您的问题/错误无关)。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。