【vue-awesome-swiper 轮播图】

安装

npm i vue-awesome-swiper#3.1.3

组件在vue中全局引入

import VueAwesomeSwiper from 'vue-awesome-swiper'
// require styles
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { default global options } */ )

在 Home.vue 组件中使用

<template>
  <div>
    <swiper :options="swiperOption">
      <swiper-slide>
        <img class="w-100" src="../assets/images/210794580bb9303653804bb7b482f2a4.jpeg">
      </swiper-slide>
      <swiper-slide>
        <img class="w-100" src="../assets/images/b9905b35bb0afa9050d9ddbe04d82d29.jpeg">
      </swiper-slide>
      <swiper-slide>
        <img class="w-100" src="../assets/images/ddc8c8922cbb694dfb73c86bb03fce22.jpeg">
      </swiper-slide>
      <div class="swiper-pagination pagination-home text-right px-3 pb-2" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  data() {
    return {
        swiperOption: {
          pagination: {
            el: ".pagination-home",
            clickable: true, // 配置点击原点可以切换
          },
          loop: true, // 开启循环模式
          autoplay: {
            delay: 2000, // 切换时间间隔
            disableOnInteraction: false // 当用户滑动图片后继续自动轮播
          }
        }
    }
  } 
}
</script>

<style lang="scss">

</style>