因为swiper版本的升级,发现之前总结的方法有些不适用了,简单总结一下新版本用法。
- npm安装
npm install swiper vue-awesome-swiper --save
- main.js中全局引入
import {
Swiper as SwiperClass,
Pagination,
Mousewheel,
Autoplay
} from 'swiper/core'
import getAwesomeSwiper from 'vue-awesome-swiper/dist/exporter'
import 'swiper/swiper-bundle.css'
SwiperClass.use([Pagination, Mousewheel, Autoplay])
Vue.use(getAwesomeSwiper(SwiperClass))
- 组件中使用
<template>
<div class="carousel">
<div v-swiper:mySwiper="swiperOption">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(v, k) in banners" :key="k">
<img :src="require('./../assets/img/' + v)" class="banner">
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</template>
<script>
export default {
name: 'carousel',
data () {
return {
swiperOption: {
loop: true,
initalSlide: 0,
autoplay: {
delay: 3000,
disableOnInteraction: false
},
speed: 800,
mousewheel: true,
pagination: {
el: '.swiper-pagination',
clickable: true
}
},
banners: ['banner.png', '新闻图片1.png', 'productbg.png']
}
}
}
</script>