将响应列表内联显示比窗口更宽

Question

我想在我的网站上做一个无限的滑块。我尝试做的是列出一个无序的元素列表，其中列表项将是单个幻灯片。我在让列表项内联显示并允许溢出通过浏览器的左端和右端时遇到了问题，同时也使列表项保持响应，从而使它们缩小。我已经尝试了所有我能找到的SE，甚至问我的朋友谁是一个全堆栈开发人员的帮助，但没有运气。

<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;
}

这样做的想法是，一次只有一个列表项目出现在屏幕上，左箭头和右箭头将滑动#幻灯片显示以允许其他幻灯片进入视图。

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

Update：下面是滑块的功能演示--您可能想用(更快)的代码替换js：http://output.jsbin.com/jorucexeza/