Установите разные интервалы времени для каждого слайда в каруселях vuetify

Question

Мне нужно установить разное время для каждого v-carousel-item , в Vuetify carousels.

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;
            }
        }
    }
});