0
私のウェブサイトの純粋なCSSとHTMLスライダーを試してみます。 this oneのようになります。写真だけでなく、ボタンやテキストも含める必要があります。だから、私は<div>と思った（以下のコードは、divsの動作を左から右に、そして右から左へスライドさせたときを示している）。そして、彼らが左側に現れ、隠れているとき、すべては美しいです。しかし、問題は彼らが右側に滑っているときです。次に、スクロールバーが表示され、ブラウザの幅が拡大されます。右側から純粋なcss3スライダーが正しく動作しない
このバグを解決するにはどうすればよいですか？
.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>