vue2下实现swiper图片轮播滚动

vue2下实现swiper图片轮播滚动，可以使用使用vue-awesome-swiper滑块插件。
swiper这么好用的插件相信大家都非常熟悉，所以有伟大的人就把它封装成了vue2下的插件vue-awesome-swiper，为大家带来了幸福~

1、首先还是安装依赖包:进入项目目录，安装swiper
npm install vue-awesome-swiper --save

2、引入资源
//vue滑块
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)

3、编辑组件

     <template>
       <swiper  :options="swiperOption" ref="mySwiper" class="swiper ">
        <!-- slides -->
        <swiper-slide>Slide 1</swiper-slide>
        <swiper-slide>Slide 2</swiper-slide>
        <swiper-slide>Slide 3</swiper-slide>
        <!-- Optional controls -->
        <div class="swiper-pagination"  slot="pagination">
          <span class="" v-for = "item in slideCont" :key="item.id"></span>
        </div>
        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>
      </swiper>
    </template>
    <script>
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    export default {
         name: 'carrousel',
         data() {
            return {
              slideCont: [1, 2, 3],
              swiperOption: {
                autoplay: 3000,
                effect: "",
                grabCursor: true,
                setWrapperSize: true,
                paginationClickable: true,
                mousewheelControl: true,
                observeParents: true,
                pagination: {
                  el: ".swiper-pagination",
                  bulletClass: "my-bullet",
                  bulletActiveClass: "my-bullet-active"
                },
                navigation: {
                  nextEl: ".swiper-button-next",
                  prevEl: ".swiper-button-prev"
                },
                on: {
                  slideChange() {
                    if (this.isBeginning) {
                      this.navigation.$prevEl.css("display", "none");
                    } else {
                      this.navigation.$prevEl.css("display", "block");
                    }
                  }
                }
              }
            };
          },
        components: {
            swiper,
            swiperSlide
          },
        computed: {
          swiper() {
            return this.$refs.mySwiper.swiper
          }
        },
        mounted() {
          // this.swiper.slideTo(2, 1000, false)
        }
      }
    </script>

更多属性和方法，参考https://www.swiper.com.cn/，好好用~