vue swiper

效果：【超过三个卡片后出现左右箭头，可鼠标拖动切换/点击箭头切换】

实现：
(github：https://github.com/surmon-china/vue-awesome-swiper)
(api：https://www.swiper.com.cn/api/index.html)
1、下载

npm install swiper vue-awesome-swiper --save

2、引入

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

// import style (>= Swiper 6.x)
import 'swiper/swiper-bundle.css'

// import style (<= Swiper 5.x)
import 'swiper/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

3、页面

<template>
  <div v-swiper:mySwiper="swiperOption">
    <div class="swiper-wrapper">
      <div class="swiper-slide" :key="index" v-for="(item, index) in banners">
        <img :src="banner">
      </div>
    </div>
    <div v-show="isShow">
	  <div class="swiper-button-prev" @click="prev"></div>
	  <div class="swiper-button-next" @click="next"></div>
	 </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        banners: [ '/1.jpg', '/2.jpg', '/3.jpg' ],
        swiperOption: {
          pagination: {
            el: '.swiper-pagination'
          },
          slidesPerView: 3,  //默认最多显示3个卡片，超过3个出现箭头
	      navigation: {
	        nextEl: '.swiper-button-next',
	        prevEl: '.swiper-button-prev'
	      }
        }
      }
    },
    watch: {
    isShow(newVal) {
      this.isShow = newVal  // 此处监听了idShow,这里我的卡片数据是动态的，是socket实时传输的，在拿到socket数据时改变isShow的值
    },
    immediate: true,
    deep: true
  }
    mounted() {
      this.mySwiper.slideTo(3, 1000, false)
    },
    methods: {
	 prev () {
      this.mySwiper.slidePrev()  //点击箭头触发滚动
	 },
	 next () {
	  this.mySwiper.slideNext()
	 }
  }
</script>