<template>
    <div class="swiper-container">
      <van-swipe :autoplay="3000" :show-indicators="true" indicator-color="white" :loop="true">
        <van-swipe-item v-for="(item, index) in swiperItems" :key="index">
          <img :src="item" alt="" style="width: 100%;" />
        </van-swipe-item>
      </van-swipe>
    </div>
  </template>
  
  <script>
  import { ref } from 'vue';
  import { Swipe, SwipeItem } from 'vant';
  // 但是在使用本地图片时，你需要使用 require 或者 import 的方式引入本地图片。
  import lun3Image from "@/assets/lun/lun1.jpg"
  import lun1Image from "@/assets/lun/lun2.jpg"
  import lun2Image from "@/assets/lun/lun3.jpg"
  import lun4Image from "@/assets/lun/lun4.jpg"
  
  
  export default {
    components: {
      VanSwipe: Swipe,
      VanSwipeItem: SwipeItem,
    },
    setup() {
      // 这里可以替换为你的图片地址
      const swiperItems = ref([
      lun3Image,
      lun1Image,
      lun2Image,
      lun4Image,
      ]);
  
      return {
        swiperItems,
      };
    },
  };
  </script>
  
  <style scoped>
  .swiper-container {
    width: 100%;
    overflow: hidden;
    height: 400px; /* 设置轮播图高度 */
  }
  </style>




  