在CSS中构建图像滑块

Question

我需要一些帮助来构建css / HTML中的图像滑块。

我的问题是我必须滑入的五个图像不会被隐藏，因此它们会跨越2个网页的整个宽度，从而创建一个水平滚动条。我希望隐藏的图像被隐藏，因此没有水平滚动条。

.slider {
  height: 350px;
}

.slider figure div {
  width: 20%;
  float: left;
}

.slider figure img {
  width: 100%;
  float: left;
}

.slider figure {
  position: relative;
  width: 500%;
  left: 0;
  animation: 40s slidy infinite;
}

<div class="slider">
  <figure>
    <div class="slide"><img src="#"></div>
    <div class="slide"><img src="#"></div>
    <div class="slide"><img src="#"></div>
    <div class="slide"><img src="#"></div>
    <div class="slide"><img src="#"></div>
  </figure>
</div>

Answer 1

一个非常简单的解决方案可能是给你的slider课程：

width: <someFixedWidth>px;
overflow: hidden;

这样，任何溢出滑块的东西都会被隐藏。