使用swiper4轮播插件

https://www.swiper.com.cn/download/index.html
历史版本https://www.swiper.com.cn/about/us/index.html#version-different
swiper4：稳定版本4.5.1

"dependencies": {
        "swiper": "^4.5.1",
    },
    npm install
    npm update

<template>
  <div class="index">
    <div class="swiper-container swiper-index">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item, index) in 5" :key="index">
          <div
            style="
              width: 100%;
              height: 100%;
              display: flex;
              justify-content: center;
            "
          >
            <div style="font-size:50px;color:red;">{{ index }}</div>
          </div>
        </div>
      </div>
       //如果需要导航按钮
      <div class="pagination"></div>
      //<div class="swiper-button-prev swiper-btn"></div>
      //<div class="swiper-button-next swiper-btn"></div> 
    </div>
  </div>
</template>
<script>
import 'swiper/dist/css/swiper.min.css';
import Swiper from "swiper/dist/js/swiper.min.js";
//swiper
export default {
  data() {
    return {};
  },

  mounted() {
    new Swiper(".swiper-index", {
      autoplay: true,
      loop: true,
      spaceBetween: 10,
      observer: true,
      observeParents: true,
      mousewheel: true,
      pagination: {
        el: ".pagination",
        clickable: true,
      },
    });
      // new Swiper(".swiper-index", {
      //   autoplay: true,
      //   loop: true,
      //   spaceBetween: 10,
      //   observer: true,
      //   observeParents: true,
      //   // 如果需要前进后退按钮
      //   navigation: {
      //     nextEl: ".swiper-button-next",
      //     prevEl: ".swiper-button-prev",
      //   },
      // });
  },
};
</script>
<style lang="scss" scoped>
::v-deep .swiper-pagination-bullet-active {
  width: 30px !important;
  border-radius: 10px;
  background-color: #c13232;
}
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 35px;
  ::v-deep .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    margin: 0 10px;
    border-radius: 10px;
    z-index: 99999999999;
    background-color: #c13232;
  }
}
/*::v-deep .swiper-button-prev {
  width: 60px;
  height: 120px;
  background-size: 60px 120px;
  border: none;
  outline: none;
  background-image: url(###);
}
::v-deep .swiper-button-next {
  width: 60px;
  height: 120px;
  background-size: 60px 120px;
  border: none;
  outline: none;
  background-image: url(###);
}*/
</style>