swiper轮播图，抽离公用组件vue2(本项目版本为9.1.1)

代码如下，可以直接复制，单独组价引用，因本项目同一页面需要多次使用，故此id需要单独抽离，采用传值方法解决不同id问题

引用案例：

 <CarouselAssembly

            :idb="'swiperContainer8'"

            :slides="slides"

            :display-number="3"

          ></CarouselAssembly>

展示五张

HTML代码如下：

<template>

  <div class="about">

    <div :id="idb" class="swiper-container">

      <div class="swiper-wrapper">

        <div v-for="(item, index) in slides" :key="index" class="swiper-slide">

          <div style="width: 80px; height: 136px" class="isbox" @click="openDetails(item)"

            ><p>暂无图片</p></div

          >

        </div>

      </div>

      <!-- <div class="swiper-pagination"></div> -->

      <div

        slot="button-prev"

        class="swiper-button-prev"

        style="transform: scale(0.5); width: calc(var(--swiper-navigation-size) / 44 * 0)"

        @click="prevBtn"

      ></div>

      <div

        slot="button-next"

        class="swiper-button-next"

        style="transform: scale(0.5); width: calc(var(--swiper-navigation-size) / 44 * 0)"

        @click="nextBtn"

      ></div>

    </div>

  </div>

</template>

  js代码如下：

<script>

import Swiper from "swiper";

import "swiper/swiper.min.css";

export default {

  name: "About",

  props: {

//需要轮播的图片列表

    slides: {

      type: Array,

      default: () => [],

    },

//需要一次性展示的张数，可以自己传

    displayNumber: {

      type: Number,

      default: 3,

    },

//同一页面多次复用，需要使用不同的id

    idb: {

      type: String,

      default: "",

    },

  },

  data() {

    return {

      initidid: null,

    };

  },

  mounted() {

    this.$nextTick(() => {

      this.initidid = new Swiper("#" + this.idb, {

        slidesPerView: this.displayNumber,

        spaceBetween: 0,

        centeredSlides: true,

        loop: true,

        pagination: {

          el: ".swiper-pagination",

          clickable: true,

        },

        navigation: {

          nextEl: ".swiper-button-next",

          prevEl: ".swiper-button-prev",

        },



        // 如果需要分页器

        // pagination: {

        //   el: ".swiper-pagination",

        // },



        // 如果需要滚动条

        // scrollbar: '.swiper-scrollbar',

        //如果需要自动切换海报

        // autoplay: {

        //   delay: 1000,//时间 毫秒

        //   disableOnInteraction: false,//用户操作之后是否停止自动轮播默认true

        // },

      });

    });

  },

  methods: {

    prevBtn() {

      console.log(this.initidid);

      this.initidid.slidePrev();

    },

    nextBtn() {

      this.initidid.slideNext();

    },

    openDetails(item) {

      this.$emit("openPresent", item);

    },

  },

};

</script>

css代码如下：

<style lang="less" scoped>

.about {

  overflow: hidden;

  height: 150px;

  position: relative;

}

.swiper-container {

  width: 100%;

  height: 100%;

}

.swiper-slide {

  text-align: center;

  font-size: 18px;

  background: transparent;



  /* Center slide text vertically */

  display: -webkit-box;

  display: -ms-flexbox;

  display: -webkit-flex;

  display: flex;

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  -webkit-justify-content: center;

  justify-content: center;

  -webkit-box-align: center;

  -ms-flex-align: center;

  -webkit-align-items: center;

  align-items: center;

  transition: 300ms;

  transform: scale(0.8);

  .isbox {

    background: url(~@/assets/images/new-icon04.png) no-repeat;

    background-size: 100% 100%;

    p {

      width: 33px;

      height: 33px;

      font-size: 12px;

      text-shadow: 0 0 4px #0091ff;

      color: #fff;

      margin: auto;

      line-height: 2 !important;

      margin-top: 44px;

      word-wrap: break-word;

    }

  }

}

.swiper-slide-active,

.swiper-slide-duplicate-active {

  transform: scale(1);

  .isbox {

    background: url(~@/assets/images/new-icon02.png) no-repeat;

    background-size: 100% 100%;

  }

}

</style>