自动滑动轮播

Question

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

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

Answer 1

您可以使用setInterval()调用next()函数。之后你应该添加一个 beforeDestroy() 方法来清除间隔。您还可以使用相同的代码将按钮添加到 start/stop 间隔。

在页面 mounted()

上开始自动滑动的示例

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

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

自动滑动轮播

Automatically Sliding Carousel

slider

carousel

vue.js

vue-component