vue swiper demo网站 ( 重点 )
https://github.surmon.me/vue-awesome-swiper/
首先vue项目引入swiper组件需要先下载依赖
npm install vue-awesome-swiper --save
然后引入,
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
先上一段代码,
<template>
<div class="swiper-c">
<swiper :auto-update="true" class="actor-list" ref="mySwiper" :options="swiperOption">
<swiper-slide class="swiper-slide" v-for="(item,index) in list" :key="index">
<div class="buttom-time">2019-7-31</div>
</swiper-slide>
</swiper>
<div class="swiper-button-next iconfont icon-widget-shuangjiantouyou" @click="prev(index)"></div>
<div class="swiper-button-prev iconfont icon-widget-shuangjiantouzuo" @click="next(index)"></div>
</div>
</template>
<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
export default {
data () {
return {
swiperOption: {
slidesPerView: 6,
spaceBetween: 10,
slidesPerGroup: 6,
loop: true,
loopFillGroupWithBlank: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
}
}
},
components: {
Swiper,
SwiperSlide
},
watch: {},
mounted () {
},
computed: {},
methods: {
prev (index) {
this.$refs.mySwiper.$swiper.slidePrev(index)
},
next (index) {
this.$refs.mySwiper.$swiper.slideNext(index)
}
}
}
</script>
<style scoped lang="scss">
@import "../../assets/css/swiper-bundle.min.css";
</style>