在Vue3-carousel中显示多个图像

Question

我在网上到处寻找答案，但一无所获。

可以一个善良的灵魂请解释给我，一个新手，我如何得到三个独立的图像显示使用Vue3-carousel?

我看了一下ve3 -carousel文档，但是如果解决方案在那里，我没有看到它。

<template>
<section class="productOverview">
<Carousel :itemsToShow="3" :wrapAround="true">
<Slide v-for="slide in 3" :key="slide">
<div class="carousel__item">{{ slide }}</div>
</Slide>
</Carousel>
</section>
</template>

我假设魔法发生在脚本区域的某个地方…

<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,
},
});
</script>

提前感谢。

Answer 1

尝试用您的图像url创建数据对象:

export default defineComponent({
name: "Autoplay",
components: {
Carousel,
Slide,
},
data() {
return {
images: [{id: 1,url:'img1url'}, {id: 2,url:'img2url'}, {id: 3,url:'img3url'}]
}
}

Then i template loop through images

<Slide v-for="(image, index) in images" :key="image.id">
<img :src="getImage(image.url)" />
<button v-if="slidesCount > 1" @click="deleteImage(index)">x</button>
</Slide>

图片的方法:

methods: {
getImage(imagePath) {
return require(imagePath);
}
}