Vue里使用swiper不能自动轮播问题
Vue项目里使用vue-awesome-swiper组件,其配置通swiper官网配置,但是在实际项目里使用autoplay:3000 并不能实现自动轮播的效果,后来研究发现是需要把autoplay:true能实现这样的效果swiperOption: {//以下配置不懂的,可以去swiper官网看api,链接http://www.swiper.com.cn/api/...
·
Vue项目里使用vue-awesome-swiper组件,其配置通swiper官网配置,但是在实际项目里使用autoplay:3000 并不能实现自动轮播的效果,后来研究发现是需要把autoplay:true能实现这样的效果
swiperOption: {
//以下配置不懂的,可以去swiper官网看api,链接http://www.swiper.com.cn/api/
// notNextTick是一个组件自有属性,如果notNextTick设置为true,组件则不会通过NextTick来实例化swiper,也就意味着你可以在第一时间获取到swiper对象,<br data-filtered="filtered"> 假如你需要刚加载遍使用获取swiper对象来做什么事,那么这个属性一定要是true
notNextTick: true,
// swiper configs 所有的配置同swiper官方api配置
autoplay: true,
speed:1000,
setWrapperSize: true,
autoHeight: true,
pagination: ".swiper-pagination",
paginationClickable: true,
mousewheelControl: true,
observeParents: true,
// 如果自行设计了插件,那么插件的一些配置相关参数,也应该出现在这个对象中,如下debugger
debugger: true,
loop : true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
},
pagination: {
el: ".swiper-pagination",
clickable: true
}
}
更多推荐
已为社区贡献2条内容
所有评论(0)