vue2中使用Swiper5

npm 下载

npm i swiper@5

引入模块和css样式

import Swiper from "swiper";
import 'swiper/css/swiper.css'

实例

<template>
  <div>
   <div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide" 
        v-for="(item,index) in container" 
        :key="index">{{item}}</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>
  </div>
</template>

<script>
import Swiper from "swiper";
import 'swiper/css/swiper.css'
export default {
  data() {
    return {
      container:[1,2,3,4]
    };
  },
  mounted() {
    this.$nextTick(() => {
        var mySwiper = new Swiper(‘.swiper’, {
            loop: true,
            // 如果需要分页器
            pagination: {
              el: ".swiper-pagination",
              //点击小球的时候也切换图片
              clickable: true,
            },
            // 如果需要前进后退按钮
            navigation: {
              nextEl: ".swiper-button-next",
              prevEl: ".swiper-button-prev",
            },
          });
    });
  },
};
</script>
</style>