Automatically Sliding Carousel - vue.js

Question

I have a carousel in vue which has left and right arrows. So the carousel is changing when you click one of them. What I am trying to achieve is to change the carousel automatically after 5 seconds for example.
So I have a carousel component:
<template>
<div class="carousel" #keydown="checkSlide($event)" tabindex="0">
<slot></slot>
<button #click.prevent="next" class="btn btn-next"><i class="fa fa-angle-right"></i></button>
<button #click.prevent="prev" class="btn btn-prev"><i class="fa fa-angle-left"></i></button>
</div>
</template>
<script>
export default {
data () {
return {
index : 0,
slides : [],
slideDirection: '',
}
},
computed: {
slidesLength() {
return this.slides.length;
}
},
mounted(){
this.slides = this.$children;
this.slides.map( (slide,index) => {
slide.index = index;
});
},
methods: {
next(){
this.index++;
if(this.index >= this.slidesLength){
this.index = 0;
}
this.slideDirection = 'slide-right';
},
prev(){
this.index--;
if(this.index < 0){
this.index = this.slidesLength - 1;
}
this.slideDirection = 'slide-left';
},
checkSlide(event){
if(event.keyCode === 39){
this.next();
}else if (event.keyCode === 37){
this.prev();
}else {
return;
}
},
}
}
</script>
And I also have carouselslide component:
<template>
<transition :name="dir">
<div v-show="visible">
<slot></slot>
</div>
</transition>
</template>
<script>
export default {
data() {
return {
index : 0,
}
},
computed : {
visible() {
return this.index === this.$parent.index;
},
dir() {
return this.$parent.slideDirection;
},
}
}
</script>
At the end I am calling my carousel in my home page like this:
<carousel >
<carousel-slide v-for="ticket in tickets" :key="ticket.id" class="carousel-slider">
<img :src="ticket.src" :alt="ticket.name">
</carousel-slide>
</carousel>
Hope my question is clear and thanks for your helps...

Answer 1

You could use setInterval() to call next() function. After that you should add a beforeDestroy() method to clear the interval.
You can also add a button to to start/stop the interval with the same code.
Example to start auto-slide on page mounted()
mounted(){
....
this.interval = setInterval(() => { this.next() }, 5000)
},
beforeDestroy () {
clearInterval(this.interval)
}

Answer 2

I think we should have a method that do this with a setInterval stored so we can clear it when we call next or prev
data() {
return {
...
interval: null,
}
},
methods: {
switchInterval() {
// if it's already set we clear so we reset calculation
if (this.interval !== null) clearinterval(this.interval);
this.interval = setInterval(() => {
// call next or prev logic
}, 5000)
},
next() {
...
// you can use the same logic in prev()
this.switchInterval()
},
...
},
beforeDestroy() {
// just make sure this.interval is not null
if (this.interval) clearInterval(this.interval)
}