html - 图像滑块的响应式包装div

因此，我尝试使用HTML5，CSS3和jQuery创建一个响应式图像滑块。我已经创建了滑块，但是它没有响应。可能是因为滑块的父包装没有响应。当我尝试使父包装器div响应时，要么显示滑块内的所有图像，要么图像变形（将高度分配给父包装器div时）。我们无法从父div移除overflow:hidden表单，因为它是唯一阻止所有图像同时显示的属性。这是我的小提琴：Fiddle
这是我的HTML

<div id="slider-wrapper">
    <div class="images">
        <img src="image1.jpg">
        <img src="image2.jpg">
        <img src="image3.jpg">
        <img src="image4.jpg">
    </div>
</div>

和CSS相同

#slider-wrapper {
  width: 80%;
  height: auto;
  overflow: hidden;
  border: 1px solid black;
}

#slider-wrapper .images {
  width: 100%;
  height: auto;
}

#slider-wrapper .images img {
  width: 100%;
  height: auto;
  overflow: hidden;
}

我试图将代码缩减到基本级别，以便仅提及需要响应的父div以及其中的图像div。我要实现的是将只有第一个图像以其当前的宽度和高度自动可见（以确保图像响应），并使所有图像隐藏。我使用jQuery来浏览图像。谢谢：）干杯！！

最佳答案

我修改了您的代码，以便在图像上使用display:inline-block在容器上使用white-space:nowrap来显示彼此相邻的图像。

请查看this updated example。

#slider-wrapper{
    ....
    white-space:nowrap;
}

#slider-wrapper .images img{
    ....
    display:inline-block;
}

规则display:inline-block用于告诉浏览器：

“这些项目应被视为块状元素（例如，它们可以具有高度和宽度），但与此同时，也必须将它们视为内联项目（因此，它们不会像其他一样堆叠在另一个下面，而是一个在另一个旁边）是“单词”）”。

为了将其并排放置，有必要使容器足够宽以容纳该长内容（否则，元素将排在下一行，如长文本中的单词）。您有一个固定宽度的容器，因此必须告诉浏览器：

“不要在空白处换行，忽略它们，并将所有元素放在同一行上”