所以我有这段代码:
<ul class="acc-list list-inline">
<li>
<img src="image.png" alt="">
<div class="item-container">
<p class="description">texttexttext</p>
<p class="name">texttexttext</p>
</div>
</li>
<li>
<img src="image.png" alt="">
<div class="item-container">
<p class="description">texttexttext</p>
<p class="name">texttexttext</p>
</div>
</li>
<li>
<img src="image.png" alt="">
<div class="item-container">
<p class="description">texttexttext</p>
<p class="name">texttexttext</p>
</div>
</li>
</ul>
使用 Bootstrap 和一些额外的 CSS，这段代码实质上是在页面上水平生成一个包含 3 张图像的列表。这些图像没什么特别的，因为我使用的是 Bootstrap ，所以它们会在稍微调整窗口大小时重新定位自己。例如，如果我调整窗口大小以表示类似于手机屏幕的内容，由于我的样式和 Bootstrap ，列表简单显示所有 3 个图像垂直重叠。
您可能会认为这很好，但在这种情况下我想做的实际上是使用某种 jQuery slider 库。在智能手机大小的窗口中，图像不是垂直排列在彼此之上，而是希望它们离开并作为 slider 画廊返回。
我已经尝试过了，但不可否认我真的很不擅长 jQuery/JS，所以我正在徘徊，是否有人可以给我指出一个很好的例子或者可以帮助我进行一些编码。我在 Internet 上四处张望，但似乎只遇到了 slider 随窗口调整大小的示例。
但是，我想做的是完全摆脱我的列表代码，并在窗口非常小时将这些图像放入一个全新的 slider 库中。
最佳答案
我可以提供一种不同的方法吗？使用简单的水平滚动条——你可以找到一些不错的可定制滚动条，使它看起来更花哨。因为它包含图像，所以我没有做 jsfiddle:
<!DOCTYPE html>
<html>
<head>
<style>
body
{
width:100%;
}
#hold
{
width:90%;
height:300px;
overflow-x:auto;
overflow-y:hidden;
}
#image_container
{
width:920px; /* equal to total width of all images */
min-width:480px; /* minimum for device size */
}
#image_container li
{
display:inline;
width:300px;
height:100%;
margin:2px;
}
#image_container li img
{
width:300px;
}
</style>
</head>
<body>
<div id="hold">
<ul id="image_container">
<li><img src="../images/slides/bridge.jpg"></li>
<li><img src="../images/slides/road.jpg"></li>
<li><img src="../images/slides/leaf.jpg"></li>
</ul>
</div>
</body>
</html>
关于javascript - 如何制作响应窗口大小的图像列表 - CSS/JS/Bootstrap，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24455179/