CSS3 内容 slider 切断内容

Question

我在 CSS3 中为图像创建了一个内容 slider 。我想创建一个纯 CSS3 slider ，没有任何 Javascript 或 JQuery。但是，我的图像不知何故被“截断”了。

你可以实时看到问题here .

HTML:

<div id="slider">
<img src="1.jpg" /><img src="1.jpg" /><img src="1.jpg" /><img src="1.jpg" />
</div>

CSS:

body {
    margin: 0;
}

#slider
{
    height: 200px;  
    width: 500px;
    padding: 0;
    margin: 0;
    position: relative;
    display: inline-block;  
    overflow: hidden;
    white-space: nowrap;
    transition: left .3s linear;
    -moz-transition: left .3s linear;
    -o-transition: left .3s linear;
    -webkit-transition: left .3s linear;
    -webkit-animation: slide-animation 25s infinite;
}

@-webkit-keyframes slide-animation {
    0% {left:0px; opacity:1;}
    20% {left:0px; opacity:1;}
    25% {left:-500px; opacity:1;}
    45% {left:-500px; opacity:1;}
    50% {left:-1000px; opacity:1;}
    70% {left:-1000px; opacity:1;}
    75% {left:-1500px; opacity:1;}
    100% {left:-1500px; opacity:0;}
}

如有任何帮助，我们将不胜感激!

Answer 1

您的容器的宽度不足以容纳所有图像。

当你向左移动时，容器的右边界进入 View ，并且看不到图像。

实现此目的的另一种方法是更改​​第一张图片的边距。

updated codepen

CSS

#slider img:first-child {
    -webkit-animation: slide-animation 25s infinite;
}

@-webkit-keyframes slide-animation {
    0% {margin-left:0px; opacity:1;}
    20% {margin-left:0px; opacity:1;}
    25% {margin-left:-500px; opacity:1;}
    45% {margin-left:-500px; opacity:1;}
    50% {margin-left:-1000px; opacity:1;}
    70% {margin-left:-1000px; opacity:1;}
    75% {margin-left:-1500px; opacity:1;}
    100% {margin-left:-1500px; opacity:0;}
}