Vue项目，使用vue-awesome-swiper插件（可一次切换多张）

一、准备工作

1、下载插件（最新版本的swiper可能会出现未知bug，所以我用的是5.4.5版本）

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

二、页面使用

1、引入

import 'swiper/css/swiper.css'
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'

2、注册组件

components:{ Swiper, SwiperSlide }

3、在data中设置options

data() {
    return {
      options: {
        pagination: {
          el: ".case-swiper-pagination"
          //区分不同Swiper的组件
        },
        //显示分页
        loop: true,
        //开启循环
        loopedSlides: 6,
        //设置平滑
        slidesPerView: 3,
        //设置能够同时显示的数量（可设置 auto）
        speed: 1000,
        //切换速度

        navigation: {
          prevEl: ".swiper-button-prev2",
          nextEl: ".swiper-button-next2"
        },
        //左右箭头按钮(可自定义)

        // autoplay: false,
        //是否开启自动轮播

        autoplay: {
          delay: 1000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        // 开启自动轮播后，设置自动轮播的延迟时间
        loopAdditionalSlides: 1,
        //复制若干个slide
        // slidesPerGroup: 3,
        // 定义slides的数量多少为一组，即每次切换slides的数量，默认每次切换一张
        on: {
          slideChangeTransitionEnd: function() {
            console.log(this.activeIndex);
            //获取当前下标，切换结束时，告诉我现在是第几个slide
          }
        }
      }
    };

4、完整代码

<template>
  <div class="box"
    @mouseenter="swiper_enter"
    @mouseleave="swiper_leave">
    <div class="swiper-button-prev swiper-button-prev2"></div>
    <swiper ref="swiper"
      :options="options">
      <swiper-slide v-for="(item,index) in 6"
        :key="index">
        <div class="card">

        </div>
      </swiper-slide>
    </swiper>
    <div class="swiper-button-next swiper-button-next2"></div>
  </div>
</template>

<script>
import "swiper/css/swiper.css";
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
export default {
  components: { Swiper, SwiperSlide },
  data() {
    return {
      options: {
        pagination: {
          el: ".case-swiper-pagination"
          //区分不同Swiper的组件
        },
        //显示分页
        loop: true,
        //开启循环
        loopedSlides: 6,
        //设置平滑
        slidesPerView: 3,
        //设置能够同时显示的数量（可设置 auto）
        speed: 1000,
        //切换速度

        navigation: {
          prevEl: ".swiper-button-prev2",
          nextEl: ".swiper-button-next2"
        },
        //左右箭头按钮(可自定义)

        // autoplay: false,
        //是否开启自动轮播

        autoplay: {
          delay: 1000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        // 开启自动轮播后，设置自动轮播的延迟时间
        loopAdditionalSlides: 1,
        //复制若干个slide
        // slidesPerGroup: 3,
        // 定义slides的数量多少为一组，即每次切换slides的数量，默认每次切换一张
        on: {
          slideChangeTransitionEnd: function() {
            console.log(this.activeIndex);
            //获取当前下标，切换结束时，告诉我现在是第几个slide
          }
        }
      }
    };
  },
  /* 引入组件 */
  computed: {
    swiper() {
      return this.$refs.swiper.$swiper;
    }
  },
  methods: {
    swiper_enter() {
      this.swiper.autoplay.stop();
    },
    //鼠标悬停停止swiper自动轮播
    swiper_leave() {
      this.swiper.autoplay.start();
    }
    //鼠标移出开启swiper自动轮播
  }
};
</script>

<style lang="less" scoped>
.box {
  width: 1050px;
  margin: 0 auto;
  position: relative;
  .swiper-slide {
    .card {
      width: 340px;
      height: 320px;
      background: url("https://img2.baidu.com/it/u=1473738496,3480051138&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500")
        no-repeat;
      background-size: 340px 320px;
      position: relative;
      cursor: pointer;
    }
  }
}
</style>

三、效果图