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

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

---

更新：这里是滑块的功能演示 - 您可能想用您的（更快）代码替换js：http://output.jsbin.com/jorucexeza/