Vue3: display a div conditionally for child based on parent div’s class

I’m new to Vue, and I’m working off of the active classes example in this Vue3 carousel plugin. I’d like to display the text and link divs only for the carousel__slide--active class, but as it is now, all carousel__items display their corresponding text and links. It seems like I should be able to do a v-if or v-bind to show image.text and only for the child class carousel__slide--active, but I have not been able to get either one to work. Any advice would be much appreciated.

Why do my carousel images disappear (zero carousel height) when carousel slider is placed inside a div?

I am using this “Image Slider with Dots (pure JS)” codepen which works very well on the page by itself, but whenever I place it inside a div for example an “outer shell” the images in the slider disappear, but the dots stay visible. I am going to be using it on a page that has a content wrapper so that’s how I ran into this issue of the carousel having zero height once it is placed inside another div.