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]
    };
  },
   watch: {
    container: {
      immediate: true,
      handler() {
        this.$nextTick(() => {
          var mySwiper = new Swiper(this.$refs.cur, {
            loop: true,
            // 如果需要分页器
            pagination: {
              el: ".swiper-pagination",
              //点击小球的时候也切换图片
              clickable: true,
            },
            // 如果需要前进后退按钮
            navigation: {
              nextEl: ".swiper-button-next",
              prevEl: ".swiper-button-prev",
            },
            //一页展示几张图片
            slidesPerView: 3
          });
        });
      },
    },
  },
};
</script>
</style>