Vue使用swiper组件
文章描述：
Vue轮播图使用—swiper组件
官网地址
https://github.com/surmon-china/vue-awesome-swiper
安装
npm install vue-awesome-swiper@3.1.3 -S配置
全局
main.js
import VueAwesomeSwiper from 'vue-awesome-swiper';
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper);vue
template
<swiper ref="mySwiper" :options="swiperOptions">
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
<swiper-slide>Slide 4</swiper-slide>
<swiper-slide>Slide 5</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>script
export default {
name: 'carrousel',
data() {
return {
swiperOptions: {
autoplay: true, // 自动轮播
speed: 1000, // 轮播速度
pagination: {
el: '.swiper-pagination'
},
on: {
slideChangeTransitionEnd: function() {
// ...
}
}
// Some Swiper option/callback...
}
}
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper
}
},
mounted() {
console.log('Current Swiper instance object', this.swiper)
this.swiper.slideTo(3, 1000, false)
}
}
发布时间：2022/07/13
发表评论