Дисплей отзывчивый список inline шире окна

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/