How to create a continuous v-slide-group with Vuetify?

user_12014183 0
Viewed 2879

Has anyone managed to create a continuous v-slide-group with Vuetify? I've created this v-slide-group with custom arrows and all, but now i have to make it continuous - when the last item is reached (by clicking the green arrow, or swiping) it has to start over. I've saw that this functionality is implemented in the v-carousel component (along with the cycle prop), but is there a way to make it with v-slide-group?

enter image description here

vuetify.js vue.js
2 Answers

I have a "working solution" right now, i'll be grateful if someone can expand on it, improve it or provide better one: I've v-model-ed the entire slide-group to a 0, and then when the user clicks the next arrow, it increments, previous arrow decrements. It takes 4 clicks to reach the end of the slide-group, so when this.slideGroup == 4, the next click sets it to 0 and restarts it.

slideGroup: 0,
nextSlide() {
  this.slideGroup++;
  this.slideGroup == 4 ? (this.slideGroup = 0) : "";
},
previousSlide() {
  this.slideGroup--;
}
user_120141830

I think this is what @Y.Futenov is doing. The template:

<v-slide-group v-model="slideGroup">
    <v-slide-item v-for="n in 25" :key="n">
        <v-btn>
            Options {{ n }}
        </v-btn>
    </v-slide-item>
</v-slide-group>

And your script for an autoplay slide show:

export default {
    data() {
        return { slideGroup: 0 }
    }
    ...
    created() {
        this.interval = setInterval(() => slideGroup++, 2000)
    }
}

And it works!

Remember to clear the interval on the beforeDestroy life cycle event.

user_15881630
Related