vue代码使用swiper.js时,不使用router!
下载 swiper.js文件
下载完成,引入到HTML
方法一:在vue data 里面定义一个对象用来初始化swiper,
在method里面定义一个函数
在mounted里面调用它;
data:{
swiper:{}
},
mounted:function(){
this.swiperTo();
},
methods:{
swiperTo:function(){
this.swiper = new Swiper('.swiper-container1', {
slidesPerView: 'auto', //重要 可以去swiper搜索
centeredSlides: true, //重要
paginationClickable: true,
effect: 'left',
spaceBetween: 30,
direction: 'vertical', // 垂直切换选项
loop: true, // 循环模式选项
observer: true,//修改swiper自己或子元素时,自动初始化swiper
observeParents: true,//修改swiper的父元素时,自动初始化swiper
initialSlide: photoIndex,//默认显示在中心位置
on: {
slideChangeTransitionEnd: function(){
//alert(this.activeIndex);//切换结束时,告诉我现在是第几个slide
}
}
});
},
},
方法二:
直接在mounted里面定义使用swiper;
//使用
mounted(){
var swiper = new Swiper('.swiper-container1', {
slidesPerView: 'auto', //重要 可以去swiper搜索
centeredSlides: true, //重要
paginationClickable: true,
effect: 'left',
spaceBetween: 30,
direction: 'vertical', // 垂直切换选项
loop: true, // 循环模式选项
observer: true,//修改swiper自己或子元素时,自动初始化swiper
observeParents: true,//修改swiper的父元素时,自动初始化swiper
initialSlide: photoIndex,//默认显示在中心位置
on: {
slideChangeTransitionEnd: function(){
//alert(this.activeIndex);//切换结束时,告诉我现在是第几个slide
}
}
});
},
HTML:
<div class="swiper-container1">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
</div>
通过文档查看swiper对应属性方法:swiper官方文档https://www.swiper.com.cn/usage/index.html#