저는 Vue를 처음 접했고 Vue3 캐러셀 플러그인에서 이 활동 클래스 예제를 작업 중입니다. image.text 및 image.link를 표시하기 위해 v-if 또는 v-bind를 사용하여 carousel__slide--active
类的文本和链接 div,但现在所有 carousel__items
都会显示其相应的文本和链接。看来我应该能够仅针对子类 carousel__slide--active
만 표시하고 싶지만 둘 중 하나를 작동시킬 수 없습니다. 어떤 조언이라도 대단히 감사하겠습니다.
관련 코드:
<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>
CSS를 사용하여 이 문제를 해결할 수도 있지만 "vue-way"를 사용하려면 현재 슬라이드를 확인하여 내용 표시 여부를 결정해야 합니다.
사용법에 대한 문서는 그다지 명확하지 않지만 소스 코드를 보면
Carousel
组件确实使用modelValue
현재 인덱스를 바인딩하는 방법을 찾을 수 있습니다.템플릿:
으아악그래서 색인이 있습니다(
i
inv-for="(image, i) in stack.images"
)并将其与currentSlide
비교