Vue3: Conditionally display a div for a child based on the class of the parent div

Question

I'm new to Vue and I'm working on this activity class example in a Vue3 carousel plugin. I wanted to show only the text and link divs of class carousel__slide--active, but now all carousel__items will show their corresponding text and links. It seems like I should be able to just do v-if or v-bind against the subclass carousel__slide--active to display image.text and image.link, but I can't get either of those to work. Any advice would be greatly appreciated.

Related codes:

<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>

Answer 1

You can also use css to solve this problem, but if you want to use "vue-way", you need to check the current slide to determine whether to display the content.

The documentation on usage is (I would say) not very clear, but if you look at the source code you'll see that the Carousel component does use a modelValue to bind the current index.

template:

So you have the index (i in v-for="(image, i) in stack.images") and do it with currentSlide Compare