在 vuetify 轮播中为每张幻灯片设置不同的时间间隔

Question

我需要为 Vuetify 轮播中的每个 v-carousel-item 设置不同的时间。

Answer 1

诀窍是更新传递给轮播的反应属性并使用@input事件检测幻灯片，如下所示：

<!-- TEMPLATE -->
<v-carousel cycle :interval="interval" @input="onSlideChange">
    <v-carousel-item :key="1">First Item</v-carousel-item>
    <v-carousel-item :key="2">Second Item</v-carousel-item>
</v-carousel>

事件处理程序将在每次幻灯片更改时更新属性 interval：

const instance = new Vue({

    data() {
        // Use default interval of 1000ms
        return {
            interval: 1000
        }
    },

    methods: {

        onSlideChange(slideNumber) {
            if (slideNumber === 1) {
                this.interval === 500;
            } else if (slideNumber === 2) {
                this.interval === 800;
            } else {
                this.interval === 1000;
            }
        }
    }
});

在 vuetify 轮播中为每张幻灯片设置不同的时间间隔

Set different time interval for each slide in vuetify carousels

carousel

vue.js

vuetify.js