CSS3内容滑块可切断内容

我在CSS3中为图像创建了一个内容滑块。我想创建一个纯CSS3滑块，没有任何Javascript或JQuery。然而，我的图像不知何故被“切断”

您可以现场查看问题。

HTML:

---

任何帮助都将不胜感激

尝试定义与其容器对应的图像的

宽度

和

高度

img{


  width:100%;
  height:100%;
}

好的，完整的图像显示了这一点

更新：

由于容器具有

宽度：700px

，因此

动画关键帧应为

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

已更新。
将所有图像的总宽度设置为容器的宽度

    #slider
    {
    width:1500px; 
    }

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

将其向左移动时，容器的右边框将进入视图，并且无法看到图像

实现这一点的另一种方法是更改第一幅图像的边距


CSS

这是一个选项，但我希望即将到来的图像在出现之前是不可见的，所以这不是一个真正的选项。检查这个小提琴，正在显示完整的图像。很高兴它帮助了您
@-webkit-keyframes slide-animation {
        0% {margin-left:0px; opacity:1;}
        20% {margin-left:0px; opacity:1;}
        25% {margin-left:-700px; opacity:1;}
        45% {margin-left:-700px; opacity:1;}
        50% {margin-left:-1400px; opacity:1;}
        70% {margin-left:-1400px; opacity:1;}
        75% {margin-left:-2100px; opacity:1;}
        100% {margin-left:-2100px; opacity:0;}
    }

    #slider
    {
    width:1500px; 
    }

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