右侧的纯 css3 滑块无法正常工作

Question

我尝试为我的网站编写纯 css 和 html 滑块。它应该看起来像 this one。它不仅应该包括照片，还应该包括按钮和文本。所以我想到了 <div>（下面的代码显示了 div 的行为，当它们从左向右和从右向左滑动时）。当它们出现和隐藏在左侧时，一切都很美好。但问题是当它们向右滑动时。然后出现滚动条，浏览器宽度扩大。

如何修复这个错误？

.mySliderContainer {
    position: relative;
    margin: 0 auto;
    width: 100%;
}

.mySliderBanner {
    position: absolute;
    display: inline-block;
    width: 100%;
    height: 100px;
}

#mySliderBannerFirst {
    background-color: tomato;
    animation: first_banner 10s ease-out infinite;
}

@keyframes first_banner {
    0% {
        right: 0px;
    }
    23% {
        right: 0px;
    }
    33% {
        right: 100%;
    }
    46% {
        right: 100%;
    }
    56% {
        right: 0px;
    }
    89% {
        right: -100%;
    }
    100% {
        right: 0px;
    }
}

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <div class="mySliderContainer">
           <div id="mySliderBannerFirst" class="mySliderBanner"></div>
        </div>
    </body>
</html>

Answer 1

这不是错误，这是正常行为，因为当您将元素移出视口时，它会自动开始滚动。

像这样更新你的CSS并给它overflow: hidden（它也需要height: 100px;）来隐藏滚动条

.mySliderContainer {
    position: relative;
    margin: 0 auto;
    width: 100%;
    height: 100px;
    overflow: hidden;
}

样本

.mySliderContainer {
    position: relative;
    margin: 0 auto;
    width: 100%;
    height: 100px;
    overflow: hidden;
}

.mySliderBanner {
    position: absolute;
    display: inline-block;
    width: 100%;
    height: 100px;
}

#mySliderBannerFirst {
    background-color: tomato;
    animation: first_banner 10s ease-out infinite;
}

@keyframes first_banner {
    0% {
        right: 0px;
    }
    23% {
        right: 0px;
    }
    33% {
        right: 100%;
    }
    46% {
        right: 100%;
    }
    56% {
        right: 0px;
    }
    89% {
        right: -100%;
    }
    100% {
        right: 0px;
    }
}

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <div class="mySliderContainer">
           <div id="mySliderBannerFirst" class="mySliderBanner"></div>
        </div>
    </body>
</html>

Answer 2

在 mySliderContainer 中将溢出设置为隐藏。

.mySliderContainer {
position: relative;
margin: 0 auto;
width: 100%;
overflow: hidden;

}

右侧的纯 css3 滑块无法正常工作

Pure css3 slider from right side doesn't work correctly

html

css

animation

keyframe