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

Posted 2023-02-23

【中文标题】CSS 绝对和相对不适用于我的 div 滑块轮播

【英文标题】：CSS absolute and relative not working for my div slider carousel

【发布时间】：2021-04-30 22:08:14

【问题描述】：

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

an example of the problem

每当我使用相对和绝对属性时，我的 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>

【参考方案1】：

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

【讨论】：

@AdetolaAremu 是的，只要它的普通嵌套 div 在父 div 中，display 就会影响它们。