最近做的一个需求需要用到swiper插件,在使用的过程中遇到了不少问题,在此总结一下。
本人使用的是目前swiper官网最新的swiper4,按照该网址:https://www.swiper.com.cn/usage/index.html
步骤操作完成后,发现效果如下。(为了更直观的看到swiper所在位置,改变了.swiper-container的背景颜色和大小,白色部分为我所定义的swiper-container)
swiper可以滑动,但是是上下滑动,没有达到预期效果,而且滚动条和切换按钮,页码均未展示出来。因为我们所用的前端项目是html文件和js分开写的,我在html文件中引入了swiper,js文件中并没有生效,所以我又重新在js文件中引入了swiper,问题解决。引入文件代码如下:
require("../../css/swiper.min.css");
require("../../js/swiper.min.js");
这时的效果为
并没有达到预期,因为我要做的是一个左右切换的swiper,在查阅了官方api后,将js改为如下代码
direction: 'horizontal'; horizontal为横向滑动切换,vertical为纵向滑动切换。这时已基本满足我要达到的效果了,修改后效果如下图
在这里贴出js代码
var mySwiper = new Swiper ('.swiper-container', {
direction: 'horizontal',
loop: true,
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
type: 'fraction',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
})
本以为到这就可以安心的开发了,可是没过多久又出现了问题。
因为我要实现的是这样的一个需求,在点击图片弹出swiper时,页码出现了错乱问题,swiper页码变成了负值。
在定义的swiper内加上这两行代码后问题解决
observer:true,//修改swiper自己或子元素时,自动初始化swiper
observeParents:true,//修改swiper的父元素时,自动初始化swiper
顺便提一下实现以上动图效果需要用到的一个方法,让swiper滑动到指定位置:mySwiper.slideTo(index, 1000, false);