结合vant组件快速制作一个二次元轮播图

<template>  
  <div class="container">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img :src="image" class="image" />
        </van-swipe-item>
      </van-swipe>
  </div>
</template>
<script>
export default {
data () {
  return {
    images: [
      'https://pic4.zhimg.com/v2-7d92536136452ddf676cb02780695a27_r.jpg',
      'https://pic2.zhimg.com/v2-43fa0ff6938fc02727da20812b7a571d_b.jpg',
      'https://p1.ssl.qhimg.com/t01525a62446d20148b.jpg',
      'https://pic2.zhimg.com/v2-693cfbb17e0b0036ad0a33be10d177c5_r.jpg',
      'https://pic4.zhimg.com/v2-3c8e39a7f444a3d157d8faec8c8b10b7_r.jpg'
    ]
  }
}
}
</script>
<style>
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.image {
  width: 100%;
  height: 200px; /* 这里设置图片高度为 200px，可以根据实际需要进行调整 */
  object-fit: cover; /* 使用 cover 属性截取图片，不超出容器范围 */
}
</style>