Question

我正在尝试制作自己的自定义滑块，但我想弄清楚为什么它不能正常工作，但存在一些问题：

-仅当我单击导航按钮时，活动滑块才显示，这就是goToSlider方法

-如果按导航按钮，则活动滑块只会显示一小会儿

-我正在控制台上记录活动的滑块，我可以看到它何时移到最后一个滑块（slideritems.length-1），它并没有像应该那样返回第一个方法...

这是我的滑块组件：

<template>
<section class="slider_maincontainer">
    <transition-group name="slider-fade">
        <div class="slider_item" v-for="(item, index) in slideritems" :key="item.title" :class="{ 'active_slider' : activeslider == index }">
            <div class="slider_item_texts_container">
                <span class="slider_item_texts_title">{{ item.title }}</span>
            </div>
            <div class="slider_item_image" :style="'background-image:url('+item.image+');'"></div>
        </div>
    </transition-group>
    <div class="slider_dots_container">
        <span class="slider_dots_dot" :class="{'active_dot_class': index == activeslider }" v-for="(slider, index) in slideritems" :key="index" @click="goToSlider(index)"></span>
    </div>
</section>
</template>
<!--SCRIPTS-->
<script>
import { mapState } from 'vuex';
export default {
name: 'SLIDERcontainer7',


computed:
{
    ...mapState('Globals', ['globals'])
},


props:
{
    sliderinterval: { default: 5000, type: Number },
    slideritems: { required:true }
},


data() {
    return {
        sliderTimer: 0,
        activeslider: 0,
    }
},


mounted() {
    console.log(this.$options.name+' component successfully mounted');
    this.startSlider();
},


methods:{


    startSlider() {
        var self = this;
        this.activeslider = 0;
        clearInterval(this.sliderTimer);
        this.sliderTimer = setInterval(() => {
        self.nextSlider() }, self.sliderinterval);
    },


    prevSlider() {
        console.log('prev item');
        if(this.activeslider == 0){
            this.activeslider = this.slideritems.length - 1;
            console.log(this.activeslider);
        }
        else{
            this.activeslider = this.activeslider - 1;
            console.log(this.activeslider);
        }
    },


    nextSlider() {
        console.log('next item');
        if(this.activeslider == this.slideritems.length - 1){
            this.activeslider = 0;
            console.log(this.activeslider);
        }
        else{
            this.activeslider = this.activeslider + 1;
            console.log(this.activeslider);
        }
    },


    goToSlider (sliderIndex) {
        var self = this;
        this.activeslider = sliderIndex;
        clearInterval(this.sliderTimer);
        this.sliderTimer = setInterval(() => {
        self.nextSlider() }, self.sliderinterval);

    },

}


};
</script>
<!--STYLES-->
<style scoped>
.active_slider{display:flex !important;}
.active_dot_class{background-color:rgb(36,36,36) !important;}
.slider_maincontainer{width:100%; height:80vh; box-shadow:3px 3px 3px rgba(0,0,0,0.2); position:relative; overflow:hidden;}
.slider_item{width:100%; height:100%; position:absolute; display:none; top:0px; left:0px;}
.slider_item_texts_container{width:50%; height:100%; display:flex; flex-direction:column; padding:20px;}
.slider_item_texts_title{font-size:30px; color:red; margin:10px 0px;}
.slider_item_image{width:50%; height:100%; outline:1px solid red;  background-size:cover; background-position:center;}
.slider_dots_container{width:50%; height:10%; display:flex; align-items:center; justify-content:center; position:absolute; bottom:0px; left:0px;}
.slider_dots_dot{width:30px; height:5px; cursor:pointer; margin:0px 5px; border-radius:5px; background-color:red;}
@media only screen and (max-width: 736px) 
{
}
</style>

vue自定义滑块出现问题

0 个答案: