我是 Vue 的新手，我正在研究這個Vue3 輪播插件中的活動類示例。我只想為carousel__slide--active該類顯示文本和鏈接 div，但現在，所有這些都carousel__items顯示了它們相應的文本和鏈接。似乎我應該能夠做一個 v-if 或 v-bind 來顯示 image.text 和 image.link 僅為子類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 > -->
<!-- <div v-bind:> -->
<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>
uj5u.com熱心網友回復：
您也可以使用 css 來解決它，但是如果您想使用“vue-way”，則需要檢查當前幻燈片以確定是否顯示內容。
關于使用的檔案（我會說）不是很清楚，但是如果您查看源代碼，您會發現該Carousel組件確實使用modelValue系結當前索引。
模板：
<template>
<Carousel v-model="currentSlide">
<Slide v-for="(image, i) in stack.images" :key="image">
<div class="carousel__item">
<img
:src="image.src"
:alt="image.alt"
:text="image.text"
:link="image.link"
/>
<div class="overlay-shown" v-if="currentSlide === i">
<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>
</Slide>
</Carousel>
</template>
<script>
// in data or with `ref` via setup
data: () => ({
currentSlide: 0,
})
</script>
所以你有索引（iin v-for="(image, i) in stack.images"）并將其與currentSlide
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/448383.html
標籤：html css Vue.js 旋转木马 Vuejs3
上一篇：ReactJS改變背景顏色