html - How to Horizontally Scroll Images In Single Line -

i trying create sort of basic carousel of images. question is: how can slides display in 1 line , them scroll horizontally instead of vertically?

here example: http://jsfiddle.net/3f7fcspl/

html:

<div id="carousel">     <div class="slide">         <img src="http://placehold.it/300x150"/>     </div>     <div class="slide">         <img src="http://placehold.it/300x150"/>     </div>     <div class="slide">         <img src="http://placehold.it/300x150"/>     </div>     <div class="slide">         <img src="http://placehold.it/300x150"/>     </div>     <div class="slide">         <img src="http://placehold.it/300x150"/>     </div>     <div class="slide">         <img src="http://placehold.it/300x150"/>     </div> </div> 

css:

#carousel {     width: 100%;     height: 150px;     background-color: #ff0000;     overflow: auto; }  #carousel .slide {     display: inline-block; } 

simply add white-space:nowrap

#carousel {      width: 100%;      height: 150px;      background-color: #ff0000;            overflow: visible;      white-space:nowrap;  }    #carousel .slide {      display: inline-block;  }

<div id="carousel">      <div class="slide">          <img src="http://placehold.it/300x150"/>      </div>      <div class="slide">          <img src="http://placehold.it/300x150"/>      </div>      <div class="slide">          <img src="http://placehold.it/300x150"/>      </div>      <div class="slide">          <img src="http://placehold.it/300x150"/>      </div>      <div class="slide">          <img src="http://placehold.it/300x150"/>      </div>      <div class="slide">          <img src="http://placehold.it/300x150"/>      </div>  </div>