Question

所以，我尝试使用HTML5，CSS3和jQuery的响应式图像滑块。我创建了滑块，但没有响应。可能是因为滑块的父包装器没有响应。当我尝试将父包装div作为响应时，滑块内的所有图像都会显示或图像失真（当高度分配给父包装div时）。我们无法删除overflow:hidden格式父div，因为它是唯一一个阻止所有图像一次显示的属性。这是我的小提琴：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。我想要实现的是只使第一个图像可见其当前宽度和高度为auto（以确保图像响应）并使所有图像都隐藏。我做了jQuery来浏览图像。谢谢:)欢呼!!

Answer 1

我修改了您的代码，以便在其他人旁边使用display:inline-block和容器上的white-space:nowrap显示图片。

请查看this updated example。

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

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

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

“这些项目将作为块元素进行处理（例如，它们可以具有高度和宽度），但同时也必须将其视为内联元素（因此它们不会堆叠在其他元素之下，而是一个与其他人一样，因为他们将是“文字”）“。

为了放置在其他人旁边，是必要的，容器足够宽以容纳这个长内容（否则元素会像下面的长文本中的单词一样继续行）。你有一个固定宽度的容器，所以你必须告诉浏览器：

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

响应式图像滑块的包装div

1 个答案: