Just starting out with Vue, I'm currently experimenting with the active classes feature from this Vue3 carousel plugin. My goal is to only show the text and link divs for the carousel__slide--active class, but at the moment, all carousel__items are displaying their respective text and links. I believe I should be able to use a v-if or v-bind to display image.text and image.link specifically for the child class carousel__slide--active, but so far, my attempts have been unsuccessful. Any guidance on this matter would be greatly appreciated.
Snippet of relevant code:
<Slide v-for="(image) in stack.images" :key="image">
<div class="carousel__item">
<img
:src="image.src"
:alt="image.alt"
:text="image.text"
:link="image.link"
/>
<!-- <div class="{ 'carousel__slide--active': true }"> -->
<!-- <div v-bind:class="{ 'carousel__slide--active': isActive }"> -->
<div class="overlay-shown">
<div v-if="image.text" class="stack-text">{{ image.text }}
</div>
<div v-if="image.link" class="stack-text">
<a v-bind:href="image.link">View Video</a>
</div>
</div>
<!-- </div> -->
</div>
</Slide>
<style>
.carousel__slide--active > .carousel__item {
transform: scale(1);
box-shadow: 8px 8px 5px -4px rgba(0, 0, 0, 0.5);
z-index: 999 !important;
}
.overlay-shown {
width: 600px;
height: auto;
background-color: #006eb7;
}
</style>