Currently, I have integrated "Carousel-3d" into my project globally by importing it like this:
import Carousel3d from 'vue-carousel-3d'
Vue.use(Carousel3d)
You can find the source and more information about it here:
After importing it, I attempted to use it within a modal window.
File: SingleStoreItem.vue
<template>
<div>
<carousel-3d>
<slide v-for="index in item.images.length" :key="index-1" :index = item.images[index-1].id>
<img :src="item.images[index-1].src">
</slide>
</carousel-3d>
</div>
</template>
<script>
export default {
name: "SingleStoreItem",
props: {
item: Object
},
};
</script>
The 'item' being referenced here is an object passed down from a parent component.
However, I encountered an issue where the carousel does not render properly within the modal. Initially, it appears like this: Modal without the carousel rendered
Strangely, when I resize the window slightly, the carousel suddenly appears correctly: Modal with the carousel rendered
Here is how I implement the modal and pass parameters to it:
<b-modal :id="item.id" size='xl' centered ok-only :title="item.name">
<SingleStoreItem
v-bind:item=item
/>
</b-modal>