[Vuejs]-Set different time interval for each slide in vuetify carousels

by

3👍

✅

The trick is to update the reactive property passed to the carousel and use the @input event to detect the slide as follows:

<!-- 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>

The event handler would update the property interval on each slide change:

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

Leave a comment