Swiper

注意❗

需要DOM结构都准备好了，才使用 new Swiper 进行创建，否则获取不到实例。

setTimeout(() => {
  this.initSwiper();
});
 
initSwiper() {
	this.swiper = new Swiper(`#${this.id}`, {
	  direction: 'vertical', // 垂直切换选项
	  slidesPerView: 'auto', //footer页自适应高度
	  observer: true,
	  observerParents: true,
	  mousewheel: true,
	  ...this.options
	})
}

常见问题

强制宽度，隐藏时初始化

解决初始化之后，滚动无法生效问题，需要确定DOM初始化好后或高度固定之后再创建 Swiper ，否则会出现问题。

 $(document).ready(() =>{
	this.footer.init();
	this.mainSwiper.initSwiper(true);
	this.contentSwiper.initSwiper();
  })

效果参考

• 地下城手游官网

扩展阅读

• swiper的使用
• 使用swiper.js创建嵌套的swiper
• 使用 swiper 的过程中个人总结
• CSS overscroll-behavior让滚动嵌套时父滚动不触发
• swiper笔记（一）一般选项