vue项目中 使用swiper轮播图

首先 安装 依赖

 npm install swiper --save-dev

使用的vue文件中 导入

import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/swiper-bundle.css";

挂载 调用

  components: {
    Swiper,
    SwiperSlide,
  },

书写 元素

   <swiper
          ref="swiper1"
          class="swiper1"
               swiperOption1 为swiper配置      
          :options="swiperOption1"
          @mouseover.native="enter1()"
          @mouseout.native="leave1()"
        >
          <swiper-slide v-for="(item, listIndex) in saleInfo" :key="listIndex">
            <div
              :class="{ active: selectIndex == listIndex }"
              @click="switchTab(listIndex)"
            >
              <p
                class="turnTitle curpoi text_align"
                :class="{ active: selectIndex == listIndex }"
              >
                {{ item.naviName }}
              </p>
              <p
                class="text_align"
                :class="{ active_border: selectIndex == listIndex }"
              ></p>
            </div>
          </swiper-slide>
          <div
            ref="left1"
            class="swiper-button-prev display_none "
            slot="button-prev"
            @click="prev1"
          ></div>
          <div
            ref="right1"
            class="swiper-button-next display_none"
            slot="button-next"
            @click="next1"
          ></div>
        </swiper>

初始化 swiper配置

  data() {
    return {
    
      swiperOption1: {
         一个窗口下 放几个 轮播图
        slidesPerView: 7,
        空隙
        spaceBetween: 10,
        slidesPerGroup: 7,

        loop: false,
        loopFillGroupWithBlank: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
         左右的点击箭头
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        on: {
          resize: () => {
                       左右箭头的点击事件 点击 箭头 轮播翻页
            this.$refs.swiper1.$swiper.changeDirection(
              window.innerWidth <= 960 ? "vertical" : "horizontal"
            );
          },
        },
      },
    };
  },

左右箭头的methods 方法 

   prev1() {
      this.$refs.swiper1.$swiper.slidePrev();
    },
    next1() {
      this.$refs.swiper1.$swiper.slideNext();
    },