Project development needs to encapsulate a type of effect components, using Swiper implementation;

Install swiper

npm i swiper

The introduction of
import Swiper from 'swiper'
import 'swiper/swiper-bundle.css'
Copy the code
The final code is as follows
<template>
<div class="swiper-box" :id="id">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide swiper-item" v-for="(item, index) in slides" :key="index">
        {{ item.name }}
      </div>
    </div>
  </div>
  <img @click="preClick" class="leftimg" src="@/assets/images/overallSituation/left-arrow.png" />
  <img @click="nextClick" class="rightimg" src="@/assets/images/overallSituation/right-arrow.png" />
</div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/swiper-bundle.css'

export default {
  data () {
    return {
      swiperInstance: null}},props: {
    slides: {
      type: Array.default () {
        return[{id: 1.name: 'all' },
          { id: 2.name: 'SK researchers' },
          { id: 3.name: 'SW researchers' },
          { id: 4.name: 'Drug Officer' },
          { id: 5.name: 'Criminal Offenders' },
          { id: 6.name: 'Hit-and-run' },
          { id: 7.name: 'Other Personnel'}}},id: {
      type: String.required: true.default: 'swiperId'
    }
  },
  mounted () {
    const that = this
    this.swiperInstance = new Swiper(` #The ${this.id} .swiper-container`, {
      direction: 'horizontal'.loop: true.speed: 400.slidesPerView: 6.spaceBetween: 10.observer: true.// Automatically initializes swiper when it modifies itself or its child elements
      observeParents: true.// Swiper is automatically initialized when its parent element is modified
      autoplay: {
        delay: 2000.disableOnInteraction: false
      },
      // autoplay: true,
      initialSlide: 3.slideToClickedSlide: true.centeredSlides: true.slideActiveClass: 'slide-visible'.on: {
        slideChangeTransitionEnd: function (r) {
          console.log(r.realIndex)
          that.$emit('swiper-avtive', r.realIndex)
        }
      }
    })
  },
  methods: {
    preClick () {
      this.swiperInstance.slidePrev()
    },
    nextClick () {
      this.swiperInstance.slideNext()
    }
  }
}
</script>

<style scoped>
.swiper-box {
  width: 100%;
  position: relative;
}
.swiper-container {
  width: 90%;
  height: auto;
}
.swiper-item {
  width: 1rem;
  height: 0.24 rem;
  line-height: 0.24 rem;
  text-align: center;
  font-size: 0.14 rem;
  color: #80DFFF;
  letter-spacing: 0;
  font-weight: 500;
}
.leftimg {
  position: absolute;
  top: 0.04 rem;
  left: 2%;
  cursor: pointer;
  z-index: 9;
  background-image: linear-gradient(to right, rgba(3.40.67.0.1), rgba(3.40.67.0.8));
  padding-right: 4px;
}
.rightimg {
  position: absolute;
  top: 0.04 rem;
  right: 2%;
  cursor: pointer;
  z-index: 9;
  background-image: linear-gradient(to left, rgba(3.40.67.0.1), rgba(3.40.67.0.8));
  padding-left: 4px;
}
.slide-visible {
  background-image: url(".. /.. /.. /assets/images/common/tab-active.png");
  background-size: 100% 100%;
  font-size: 0.16 rem;
  color: #ffffff;
}
</style>

Copy the code
Pay attention to the point
  1. 100px = 1rem in the project;
  2. The images used are listed below
  3. I need to pass an ID to every place I use it,new Swiper(#${this.id} .swiper-container, {... }Error if id is not defined.
  4. Fires to the parent componentthat.$emit('swiper-avtive', r.realIndex)Event to get which selection is currently active.