Question

下面是我的简单滑块代码（它目前无效，因为我还没有实现javascript）。此时此滑块有2个图像（具有不同的分辨率）。我做的是.sliderContainer我给了宽2520px和.wrapper我将overflow设置为hidden。这是我使用滑块或转盘时的正常情况。

现在如果我添加一个额外的图像，即图像的数量变为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>

在滑块中浮动图像的更好方法，不会给父级增加大的宽度

1 个答案: