vue-swiper轮播组件使用

<template>
    <div class="swiper">
        <swiper :options="swiperOption" ref="mySwiper">
            <!-- slides -->
            <swiper-slide><img src="static/img/2.jpg" class="img"></swiper-slide>
            <swiper-slide><img src="static/img/3.jpg" class="img"></swiper-slide>
            <swiper-slide><img src="static/img/4.jpg" class="img"></swiper-slide>
            <!-- Optional controls -->
            <!-- 轮播标志 -->
            <div class="swiper-pagination"  slot="pagination"></div>  <!-- 下方滚动圆点 -->
            <!-- <div class="swiper-button-prev swiper-button-black" slot="button-prev"></div> --> <!-- 上一个 -->
            <!-- <div class="swiper-button-next swiper-button-black" slot="button-next"></div> --> <!-- 下一个 -->

            <!-- <div class="swiper-scrollbar"   slot="scrollbar"></div> -->
        </swiper> 
    </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'  
export default {
    components: {  
      swiper,  
      swiperSlide  
  },  
  data () {
    return {
       swiperOption: {  
          notNextTick: true,
          //循环
          loop:true,
          //设定初始化时slide的索引
          initialSlide:0,
          //自动播放
          autoplay:true,
          // autoplay: {
          //     delay: 3000,
          //     stopOnLastSlide: false,
          //     disableOnInteraction: true,
          // },
          // 设置轮播
          effect : 'slide',
          //滑动速度
          speed:800,
          //滑动方向
          direction : 'horizontal',
          //小手掌抓取滑动
          // grabCursor : true,
          //滑动之后回调函数
          on: {
              slideChangeTransitionEnd: function(){
                // console.log(this.activeIndex);//切换结束时，告诉我现在是第几个slide
              },
          },
          //左右点击
          navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
          },
          //分页器设置         
          pagination: {
              el: '.swiper-pagination',
              clickable :true
          }
        },
        swiperSlides: [1, 2, 3, 4]
    }
  },
  computed: {  
    swiper() {  
      return this.$refs.mySwiper.swiper;  
    }  
  }, 
  mounted () {  
    //可以使用swiper这个对象去使用swiper官网中的那些方法  
     //console.log('this is current swiper instance object', this.swiper);
      // this.swiper.slideTo(0, 0, false);
  },
}
</script>

<style scoped>
.swiper{
    width: 300px;
    height: 200px;
    background-color: aqua;
}
.swiper-container{
    width: 100%;
    height: 100%;
}
.img{
    width: 100%;
    height: 100%;
}
</style>
更多使用方法可以访问Swiper官网：
https://www.swiper.com.cn/
来源：CSDN
作者：Jie_1997
链接：https://blog.csdn.net/Jie_1997/article/details/103633057
标签
轮播
按钮
swiper