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

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

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


.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);


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

Leave a Comment