He buscado en la web a lo largo y ancho de las respuestas, pero fue en vano.
¿Podría un alma amable explicarme, un novato, cómo obtengo tres imágenes separadas que se muestran usando Vue3-carrusel ?
He echado un vistazo a los documentos del carrusel de Vue3, pero si la solución está ahí, no la veo.
<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>Supongo que la magia ocurre en algún lugar del área del guión...
<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>Gracias por adelantado.
Intente crear un objeto de datos con las URL de sus imágenes:
export default defineComponent({ name: "Autoplay", components: { Carousel, Slide, }, data() { return { images: [{id: 1,url:'img1url'}, {id: 2,url:'img2url'}, {id: 3,url:'img3url'}] } }Luego hago un bucle de plantilla a través de las imágenes.
<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>Método para imágenes:
methods: { getImage(imagePath) { return require(imagePath); } }