1.npm 安装
npm install vue-awesome-swiper@4.0.4 --save -dev
npm install swiper@4 --save -dev
2.引用
(1)全局引用,在main.js中
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)
(2)局部引用
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
export default {
components: {
swiper,
swiperSlide
}
}
3.使用swiper
<swiper ref="mySwiper" :options="swiperOptions">
<swiper-slide v-for="(item, index) in noticeList" :key="index">
{{item.name}}
</swiper-slide>
<div class="swiper-button-prev" slot="pagination">上一条</div>
<div class="swiper-button-next" slot="pagination">下一条</div>
</swiper>
data() {
return {
swiperOptions: {
direction : 'vertical',
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
loop : true,
autoplay: {
delay: 2000,
stopOnLastSlide: false,
disableOnInteraction: false,
},
slidesPerView: 4,
spaceBetween: 0,
observer: true,
observeParents: true,
},
},
components: {
Swiper,
SwiperSlide,
},
computed: {
swiper() {
return this.$refs.mySwiper.$swiper
}
},