自动滑动轮播答案

【问题标题】：Automatically Sliding Carousel自动滑动轮播
【发布时间】：2021-10-04 01:23:15
【问题描述】：

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

而且我还有 carouselslide 组件：

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

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

【问题讨论】：

标签： vue.js slider vue-component carousel

【解决方案1】：

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

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

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

【讨论】：

非常感谢您的回答

【解决方案2】：

我认为我们应该有一个方法来存储 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)
}

【讨论】：