html - 显示比窗口宽的内联响应列表

Question

我想在我的网站上制作一个无限 slider 。我试图做的是制作一个无序列表的元素，其中列表项将是单独的幻灯片。我在让列表项以内联方式显示并允许通过浏览器的左端和右端溢出时遇到问题，同时还要保持列表项的响应性以便它们按比例缩小。我已经尝试了我在 SE 上能找到的所有东西，甚至还向我的全栈开发人员 friend 寻求帮助，但没有成功。

<section>
    <hr class="pad2">
    <ul id="slide-show">
        <li>
            <div class="arrow-left"></div>
            <img class="world-map" src="/images/passport/world_map.jpg">
            <div class="arrow-right"></div>
        </li>
        <li>
            <div class="arrow-left"></div>
            <img class="world-map" src="/images/passport/world_map.jpg">
            <div class="arrow-right"></div>
        </li>
        <li>
            <div class="arrow-left"></div>
            <img class="world-map" src="/images/passport/world_map.jpg">
            <div class="arrow-right"></div>
        </li>
    </ul>   
    <hr class="pad2">
</section>



.world-map {
    height: auto;
    width: 95%;
    margin-left: 2.5%;
    display: inline-block;
}

#slide-show {
    -webkit-transition: -webkit-transform 2s ease-in-out;
    overflow: hidden;
}

#slide-show li {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    position: relative;
    display: inline;
    float: left;
    list-style-type: none;
}

.arrow-left {
    height: 12%;
    width: 2.5%;
    display: inline-block;
    float: left;
    background-color: black;
    top: 44%;
    position: absolute;
    cursor: pointer;
}

.arrow-right {
    height: 12%;
    width: 2.5%;
    display: inline-block;
    float: right;
    background-color: black;
    top: 44%;
    position: absolute;
    cursor: pointer;
}

这个想法是，一次只有一个列表项会出现在屏幕上，左右箭头会将#slide-show 滑过以允许其他幻灯片进入 View 。

Answer 1

我更新了几行 CSS，我相信这就是您要找的:

#slide-show {
    -webkit-transition: -webkit-transform 2s ease-in-out;
    overflow: hidden;
  white-space: nowrap;
}

#slide-show li {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    position: relative;
    display: inline-block;
    list-style-type: none;
}

这是一支工作笔:http://jsbin.com/copugojapa/1/edit

---

更新:这是 slider 的功能演示 - 您可能想用您的(更快的)代码替换 js:http://output.jsbin.com/jorucexeza/