Question

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

如何修复此错误？

＆＃13;

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

＆＃13;

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

＆＃13;

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滑块无法正常工作

2 个答案: