自动滑动转盘

如何解决自动滑动转盘

我在 vue 中有一个带有左右箭头的旋转木马。因此，当您单击其中之一时，轮播会发生变化。例如，我想要实现的是在 5 秒后自动更改轮播。 所以我有一个轮播组件：

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

我也有轮播组件：

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

最后，我在主页中调用轮播，如下所示：

<carousel >
            <carousel-slide v-for="ticket in tickets" :key="ticket.id" class="carousel-slider">
                <img :src="ticket.src" :alt="ticket.name">
            </carousel-slide>
        </carousel>

希望我的问题很清楚，感谢您的帮助...

解决方法

您可以使用 setInterval() 调用 next() 函数。之后，您应该添加一个 beforeDestroy() 方法来清除间隔。 您也可以添加一个按钮来使用相同的代码开始/停止间隔。

在页面 mounted() 上开始自动滑动的示例

mounted(){
        ....
        this.interval = setInterval(() => { this.next() },5000)
},beforeDestroy () {
        clearInterval(this.interval)
}

,

我认为我们应该有一个方法来执行此操作并存储 setInterval，以便我们在调用 next 或 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)
}