如何使用Vue3-carousel实现三张独立图片的轮播展示？

完整修改代码如下 #

1. 模板部分（template）

<template>
  <section class="productOverview">
    <Carousel :itemsToShow="3" :wrapAround="true">
      <Slide v-for="(img, index) in imgList" :key="index">
        <img :src="img.url" :alt="img.alt" class="carousel__img">
      </Slide>
    </Carousel>
  </section>
</template>

2. 脚本部分（script）

<script>
import { defineComponent } from "vue";
import { Carousel, Slide } from "vue3-carousel";
import "vue3-carousel/dist/carousel.css";
  
export default defineComponent({
  name: "Autoplay",
  components: {
    Carousel,
    Slide,
  },
  data() {
    return {
      // 替换为你自己的3张图片地址即可
      imgList: [
        {
          url: "你的第一张图片地址，比如/static/img1.jpg或者线上图片链接",
          alt: "第一张图描述"
        },
        {
          url: "你的第二张图片地址",
          alt: "第二张图描述"
        },
        {
          url: "你的第三张图片地址",
          alt: "第三张图描述"
        }
      ]
    }
  }
});
</script>

3. 可选样式补充（避免图片溢出）

<style scoped>
.carousel__img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
</style>

如果你用的是<script setup>语法，也可以改成对应写法：

<script setup>
import { ref } from "vue";
import { Carousel, Slide } from "vue3-carousel";
import "vue3-carousel/dist/carousel.css";

const imgList = ref([
  {
    url: "你的第一张图片地址",
    alt: "第一张图描述"
  },
  {
    url: "你的第二张图片地址",
    alt: "第二张图描述"
  },
  {
    url: "你的第三张图片地址",
    alt: "第三张图描述"
  }
])
</script>

内容的提问来源于stack exchange，提问作者spøjst