时间戳

首页 > 解决方案 > CSS 绝对和相对不适用于我的 div 滑块轮播

javascript - CSS 绝对和相对不适用于我的 div 滑块轮播

问题描述

我正在尝试使用 VUE 制作滑块轮播，css 类（3 个 div）在 for 循环中运行。每当一个 div 淡出时，下一个滑块会在底部创建一个双滑块，这意味着两个滑块同时运行。

问题的一个例子

每当我使用相对和绝对属性时，我的 div 就会完全消失。我不知道该怎么办

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

标签： javascripthtmlcssvue.jsvue-component

解决方案

停止使用绝对或相对定位。而是在外部 div 上使用 display flex 以获得良好的定位结果。

推荐阅读