CSS absolute and relative not working for my div slider carousel

I am trying to make a slider carousel with VUE, the css classes (3 divs) are running in a for loop. Anytime a div fades out, the next slider creates a double slider at the bottom, meaning two sliders are running concurrently.

an example of the problem

Whenever I use the relative and absolute properties, my divs disappear totally. I don’t know what to do

<template>
    <h1 class="text-center">SLIDER APP</h1>
    <div>
        <div v-for="(color, index) in slider" :key="color">
            <transition name="fade">
                <div v-if="currentslide == index" :class="color"></div>
            </transition>
        </div>
    </div>
    
</template>

<script>
export default {
    data(){
        return {
            currentslide:0,
            intervals:'',
            slider:['first-slider', 'second-slider', 'third-slider'],
            isshowing:true,
        }
    },
    mounted(){
        this.intervals = setInterval(() => {
            console.log('This is slide', this.currentslide)
            this.currentslide = this.currentslide == 2 ? 0:this.currentslide+1;
        }, 2000);
    },
    beforeUnmount(){
        clearInterval(this.intervals)
    }
}
</script>

<style>

.first-slider {
    background: blue;
    height: 350px;
}

.second-slider {
    background: red;
    height: 350px;
}

.third-slider {
    background: orange;
    height: 350px;
}

.fade-enter-active, .fade-leave-active {
    transition: all 0.5s ease;
}

.fade-enter-from, .fade-leave-to {
    opacity: 0;
    transform: translateX(30px);
}

</style>

15 thoughts on “CSS absolute and relative not working for my div slider carousel”

Leave a Comment