vue swiper使用 轮播图

下载版本的时候
npm install vue-awesome-swiper@2.6.7 --save


  "swiper": "^3.4.2",
        "vue-awesome-swiper": "3.1.3"

   "swiper": "3.4.2",
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)


![在这里插入图片描述](https://img-blog.csdnimg.cn/20210616155633616.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDA0MDg2Nw==,size_16,color_FFFFFF,t_70)


<template>
  <div class="homepage-carousel">
    <!-- 标签页菜单 -->
    <div class="menu-ul">
      <div class="swiper-button-prev" slot="button-prev" > <i class="el-icon-arrow-left"></i> </div>
      <swiper class="swiper" ref="mySwiper" :options="swiperOption">
        <swiper-slide>
          <img src="../../assets/images/homepage/ce.jpg" alt="" />
        </swiper-slide>
        <swiper-slide>
          <img src="../../assets/images/homepage/ce.jpg" alt=""
        /></swiper-slide>
        <swiper-slide>
          <img src="../../assets/images/homepage/ce.jpg" alt=""
        /></swiper-slide>
        <swiper-slide>
          <img src="../../assets/images/homepage/ce.jpg" alt=""
        /></swiper-slide>
        <swiper-slide>
          <img src="../../assets/images/homepage/ce.jpg" alt=""
        /></swiper-slide>
        <swiper-slide>
          777</swiper-slide>
        <swiper-slide>
          <img src="../../assets/images/homepage/ce.jpg" alt=""
        /></swiper-slide>
        <swiper-slide>
          <img src="../../assets/images/homepage/ce.jpg" alt=""
        /></swiper-slide>
        <swiper-slide>
          10</swiper-slide>
      </swiper>
      <div class="swiper-button-next" slot="button-next" > <i class="el-icon-arrow-right
"></i> </div>
    </div>
  </div>
</template>

<script>
let vm = null;
export default {
  data() {
    return {
      menuId: 0,
      swiperOption: {
        slidesPerView: 5, //设置slider容器能够同时显示的slides数量
        speed: 500, //滑动速度
        spaceBetween: 21, //slide之间的距离（单位px
        slidesPerGroup: 5, //定义slides的数量多少为一组
        centeredSlides: false, //设定为true时，活动块会居中，而不是默认状态下的居左
        loop: true, //会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换，让Swiper看起来是循环的
        loopFillGroupWithBlank: true, //不到6个的组，剩下的slice会用空白填满
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        on: {
          //slice点击事件
          click: function () {
            const that = this;
            vm.handleClickSlide(that); //引用：this 指向的是 swpier 实例，而不是当前的 vue， 因此借助 vm，来调用 methods 里的方法
          },
        },
        allowTouchMove: false, //禁止手动拖动滑动
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        preventLinksPropagation: false, //拖动Swiper时阻止click事件,如果没有禁止拖动需要设置此项
      },
    };
  },
  methods: {
  
    //切换标签页
    handleClickSlide(vmm) {
      this.menuId = vmm.clickedIndex - vmm.activeIndex + vmm.realIndex; //获取点击的slice下标赋值给menuId来控制标签页的显示;
      //activeIndex返回当前活动块(激活块)的索引。loop模式下注意该值会被加上复制的slide数。
      //realIndex当前活动块的索引，与activeIndex不同的是，在loop模式下不会将复制的块的数量计算在内。
      //clickedIndex返回最后点击Slide的索引
      //可能是分组的原因，realIndex，activeIndex返回的是组的索引，而不是单个slice的索引，clickedIndex从6开始索引，所以需要这样处理获取准确的slice下标
    },
  },
  created() {
    vm = this;
  },
};
</script>

<style lang="less" scoped>
.homepage-carousel {
  width: 100%;
  height: 150px;
  //   background-color: #eff2f7;
  background: #88f;
}
.swiper-button-prev,
.swiper-button-next {
  position: relative;
  margin: 0 10px;
  color: rgb(101, 101, 101);
  top: 0;
  left: 0;
  right: 0;
  width: 90px;
  height: 40px;
  background: #fff;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
}
.swiper-button-prev{
    margin-right:20px ;
    }
    .swiper-button-next{
     margin-left:20px ;   
        }
.swiper-button-prev:after {
  content: none;
}
.swiper-button-next:after {
  content: none;
}
.menu-ul {
  width: 100%;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 10px;
}
.menu-list {
  width: 100%;
  display: flex;
  align-items: center;
  background: #ffffff;
  font-size: 16px;
  color: #666666;
}
.swiper-slide {
  width: 100%;
  position: relative;
  height: 100%;
  flex-shrink: 0;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>

====================================
更新版
<template>
  <div class="homepage-carousel">
    <!-- 标签页菜单 -->
    <div class="menu-ul">
      <div class="swiper-button-prev" slot="button-prev">
        <i class="el-icon-arrow-left"></i>
      </div>
      <swiper class="swiper" ref="mySwiper" :options="swiperOption">
        <swiper-slide v-for="index in 7"> {{ index }} </swiper-slide>
      </swiper>
      <div class="swiper-button-next" slot="button-next">
        <i class="el-icon-arrow-right"></i>
      </div>
    </div>
  </div>
</template>

<script>
let vm = null;
export default {
  data() {
    return {
      menuId: 0,
      swiperOption: {
        slidesPerView: "auto", //重要的
        speed: 500, //滑动速度
        spaceBetween: 20, //slide之间的距离（单位px
        centeredSlides: false, //设定为true时，活动块会居中，而不是默认状态下的居左
        loop: true, //会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换，让Swiper看起来是循环的
        loopFillGroupWithBlank: false, //不到6个的组，剩下的slice会用空白填满
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        on: {
          //slice点击事件
          click: function () {
            const that = this;
            vm.handleClickSlide(that); //引用：this 指向的是 swpier 实例，而不是当前的 vue， 因此借助 vm，来调用 methods 里的方法
          },
        },
        allowTouchMove: false, //禁止手动拖动滑动
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        preventLinksPropagation: false, //拖动Swiper时阻止click事件,如果没有禁止拖动需要设置此项
      },
    };
  },
  methods: {
    //切换标签页
    handleClickSlide(vmm) {
      this.menuId = vmm.clickedIndex - vmm.activeIndex + vmm.realIndex; //获取点击的slice下标赋值给menuId来控制标签页的显示;
      //activeIndex返回当前活动块(激活块)的索引。loop模式下注意该值会被加上复制的slide数。
      //realIndex当前活动块的索引，与activeIndex不同的是，在loop模式下不会将复制的块的数量计算在内。
      //clickedIndex返回最后点击Slide的索引
      //可能是分组的原因，realIndex，activeIndex返回的是组的索引，而不是单个slice的索引，clickedIndex从6开始索引，所以需要这样处理获取准确的slice下标
    },
  },
  created() {
    vm = this;
  },
};
</script>

<style lang="less" scoped>
.homepage-carousel {
  width: 100%;
  height: 150px;
  background: #edf0f5;
}
::v-deep .swiper-button-prev,
.swiper-button-next {
  position: relative;
  margin: 0 10px;
  color: rgb(101, 101, 101);
  top: 0;
  left: 0;
  right: 0;
  width: 30px;
  height: 40px;
  background: #fff;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
}
.swiper-button-prev {
  margin-right: 20px;
}
.swiper-button-next{
    margin-left:20px ;
}
.swiper-button-prev:after {
  content: none;
}
.swiper-button-next:after {
  content: none;
}

::v-deep .menu-ul {
  margin: 0 auto;
   width: 100%;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 10px;
}
::v-deep .menu-list {
  width: 100%;
  display: flex;
  align-items: center;
  background: #ffffff;
  font-size: 16px;
  color: #666666;
}
::v-deep .swiper-slide {
  width: 240px !important;
  height: 80px;
  flex-shrink: 0;
  background: #f99;
  cursor: pointer;
}
</style>