vue2中使用vue-awesome-swiper实现轮播

swiper官方文档：Swiper中文网-轮播图幻灯片js插件,H5页面前端开发

1.安装

注意：swiper和vue-awesome-swiper的版本一定一定一定要相对应，版本对应如下：

Swiper 5-6 vue-awesome-swiper@4.1.1(vue2)

Swiper 4.x vue-awesome-swiper@3.1.3(vue2)

Swiper 3.x vue-awesome-swiper@2.6.7(vue2)

npm install swiper@4.5.1 vue-awesome-swiper@3.1.3 --save

或

npm install swiper@5.2.0 vue-awesome-swiper@4.1.1 --save

检查package.json里swiper和vue-awesome-swiper是否安装成功

 或 

2.引入

方法一：在main.js中全局引入

// swiper@4.5.1 vue-awesome-swiper@3.1.3
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)

// swiper@5.2.0 vue-awesome-swiper@4.1.1
import VueAwesomeSwiper from 'vue-awesome-swiper'
import swipercss from 'swiper/css/swiper.min.css'
Vue.use(VueAwesomeSwiper, {
  swipercss
}) // 注册

方法二：局部引入

注意：局部引入，引入模块根据版本区分大小写：

vue-awesome-swiper@3.x 版本的 ---- 引入模块时使用小写：

import { swiper, swiperSlide } from “vue-awesome-swiper”；

vue-awesome-swiper@4.x 版本的 ---- 引入模块时使用大写：

import { Swiper, SwiperSlide } from “vue-awesome-swiper”；

// swiper@4.5.1 vue-awesome-swiper@3.1.3
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    swiper,
    swiperSlide,
  },
}

// swiper@5.2.0 vue-awesome-swiper@4.1.1
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.min.css'
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    Swiper,
    SwiperSlide
  },
}

3.使用

这里要注意的是引入的版本对应，否则会报错，两个版本我都试过了是ok的

<template>
  <div class="main-body module-contain">
    <div class="board-contain">
      <div class="lm-container-right-block"
           @mouseenter="on_bot_enter"
           @mouseleave="on_bot_leave">
        <swiper :options="swiperOption"
                ref="mySwiper">
          <swiper-slide v-for="i in list"
                        :key="i">
            {{ i }}
          </swiper-slide>
          <!-- 标记页数 -->
          <!-- <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> -->
        </swiper>
      </div>
    </div>
  </div>
</template>
<script>
// 局部引入
// swiper@4.5.1 vue-awesome-swiper@3.1.3
// import { swiper, swiperSlide } from "vue-awesome-swiper"
// import "swiper/dist/css/swiper.css"

// swiper@5.2.0 vue-awesome-swiper@4.1.1
// import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
// import 'swiper/css/swiper.min.css'
export default {
  components: {
    //import引入的组件需要注入到对象中才能使用
    // swiper@4.5.1 vue-awesome-swiper@3.1.3
    // swiper,
    // swiperSlide

    // swiper@5.2.0 vue-awesome-swiper@4.1.1
    // Swiper,
    // SwiperSlide
  },
  data () {
    return {
      swiperOption: {
        // 循环播放
        loop: true,
        // 循环方向
        direction: "vertical",
        // 设置slider容器能够同时显示的slides数量(carousel模式)
        // slidesPerView: 1,
        slidesPerView: "auto",
        // 设定为true时，active slide会居中，而不是默认状态下的居左(false)
        centeredSlides: true,
        // 滑动速度
        // speed: 1500,
        // 在slide之间设置距离（单位px）
        spaceBetween: 10,
        // 设定初始化时slide的索引，Swiper默认初始化时显示第一个slide
        initialSlide: 0,
        // 自动播放
        autoplay: {
          // 隔×秒自动滑动一次
          delay: 2000,
          stopOnLastSlide: false,
          // 设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。默认为true
          disableOnInteraction: false
        },
        // loopedSlides: 3,
        // 标记页数
        // pagination: {
        //   el: ".swiper-pagination",
        //   clickable: true, // 允许分页点击跳转
        // },
        // 左右箭头
        // navigation: {
        //   prevEl: ".swiper-button-prev",
        //   nextEl: ".swiper-button-next",
        // },
      },
      list: [1, 2, 3, 4, 5, 6]
    }
  },
  mounted () {
  },
  watch: {
  },
  methods: {
    on_bot_enter () {
      //  swiper@4.5.1 vue-awesome-swiper@3.1.3
      // this.$refs.mySwiper.swiper.autoplay.stop()

      // swiper@5.2.0 vue-awesome-swiper@4.1.1
      this.$refs.mySwiper.$swiper.autoplay.stop()
    },
    on_bot_leave () {
      //  swiper@4.5.1 vue-awesome-swiper@3.1.3
      // this.$refs.mySwiper.swiper.autoplay.start()

      // swiper@5.2.0 vue-awesome-swiper@4.1.1
      this.$refs.mySwiper.$swiper.autoplay.start()
    },
  }
}
</script>

<style lang="less" scoped>
.module-contain {
  height: 87vh;
  overflow: hidden;

  .board-contain {
    .display-flex {
      display: flex;
      justify-content: space-between;
    }

    .lm-container-right-block {
      position: relative;
      overflow: auto;
      width: 200px;
      height: 200px;

      .swiper-container {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        bottom: 0;
      }

      .swiper-slide {
        height: 60px;
        background-color: #bcf;
      }
    }
  }
}
</style>

注意设置高度设置.swiper-container和.swiper-slide的样式，

swiper-container 为设置整体滚动区域，高度一定要设置

swiper-slide 为设置单个的样式，高度一定要设置

其他的配置可以去官网查找对应的API

参考：

https://www.jianshu.com/p/51e52bfe5bf1

https://blog.csdn.net/weixin_48850734/article/details/128299949