npm install vue-awesome-swiper@3
npm install swiper

<template>
  <div v-if="items.length" class="full-page-slide-wrapper">
    <swiper :options="swiperOption" ref="mySwiper">
      <!-- slides -->
      <template v-for="(item, i) in items">
        <swiper-slide v-if="item" :key="i">
          <img @click="toTopic(item)" :src="item" alt />
        </swiper-slide>
      </template>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
// 这个文件自己去swiper的目录里面拿
import "./swiper-bundle.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
  components: {
    swiper,
    swiperSlide,
  },
  data() {
    return {
      defaultIndex: 0,
      swiperOption: {
        direction: "horizontal",
        loop: true,
        autoplay: 5000,
        slidesPerView: "auto",
        centeredSlides: true,
        spaceBetween: 10,
        // 如果需要分页器
        pagination: {
          el: ".swiper-pagination",
          bulletActiveClass: "slide_dot_active",
          bulletClass: "slide_dot",
        },
      },
      items: [
        "https://8/3/d1575fa5931e72832b45bbda.png",
        "https://3/30/d9bee1dc900549e854a3b701756.jpg",
        "https://98b8c867513a0a7247e7958.jpg",
        "https://f5f722d467e6f76e7e6050c439.jpg",
      ], // n个
    };
  },

  methods: {
    toTopic(item) {
      if (item.topicId) {
        this.$router.push({
          name: "topic.detail",
          params: { id: item.topicId },
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.full-page-slide-wrapper {
  width: 100%;
  height: 140px;
  background: white;
  box-sizing: content-box;
  padding-top: 15px;
  margin-top: 10px;
  position: relative;
  overflow: hidden;
  .swiper-container {
    width: 100%;
    height: 100%;
    .swiper-wrapper {
      display: flex;
      align-items: center;
    }
    .swiper-slide {
      width: calc(100% - 50px);
      border-radius: 5px;
    }
    .swiper-slide-prev {
      height: 90% !important;
      top: 7px;
      // transition: all .1s;
    }
    .swiper-slide-next {
      height: 90% !important;
      top: 7px;
      //  transition: all .1s;
    }
  }
  img {
    object-fit: fill;
    height: 100%;
    width: 100%;
    border-radius: 5px;
  }
  .slide_dot {
    display: inline-block;
    margin: 5px;
    width: 3px;
    height: 3px;
    background-color: #f2f2f2;
    border-radius: 50%;
    opacity: 0.5;
  }
  .swiper-pagination {
    bottom: 0;
  }
  .slide_dot_active {
    display: inline-block;
    width: 7px;
    height: 3px;
    border-radius: 5px;
    background: white;
    opacity: 1;
  }
}
</style>