javascript - 在不给 parent 很大宽度的情况下在 slider 中 float 图像的更好方法

Question

下面是我的简单 slider 代码(它目前不起作用，因为我还没有实现 javascript)。现在这个 slider 有 2 张图片(当然分辨率不同)。我所做的是 .sliderContainer 我给了宽度 2520px 和 .wrapper 我将 overflow 设置为 隐藏。这是我对 slider 或旋转木马所做的正常事情。

现在如果我添加一个额外的图像会发生什么，图像的数量变成 4 或 5 或 6 或 20 让我们说。然后我将进入代码内部并不断更改 .sliderContainer 的宽度以使其正常工作。现在我需要一种方法，我不必每次都更改 .sliderContainer 的宽度，但它应该在添加新图像时发生。新图像可能来自 json 对象中服务器的数据库。

我怎样才能做到这一点？

下面是我的代码。

HTML

<div class="wrapper">
<div class="sliderContainer">
  <div class="slider"><img src="http://googleplus-covers.com/covers/nature_balloon_ride.jpg" alt=""></div>
  <div class="slider"><img src="http://p1.pichost.me/640/10/1326822.jpg" alt=""></div>
  <div class="slider"><img src="http://googleplus-covers.com/covers/coludy_mountains_nature.jpg" alt=""></div>
</div>
</div>

CSS

.sliderContainer {
  width: 2520px;
}

.wrapper {
  overflow: hidden;
}

.slider {
  float: left;
}

这里是 JSFIDDLE

Answer 1

这是一个例子。给你的图像和包装器 width:100% 和 white-space:nowrap 给你的包装器

.wrapper {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}
.wrapper img {
  width: 100%;
}

<div class="wrapper">
  <img src="http://googleplus-covers.com/covers/nature_balloon_ride.jpg">
  <img src="http://p1.pichost.me/640/10/1326822.jpg">
  <img src="http://googleplus-covers.com/covers/coludy_mountains_nature.jpg">
</div>