How to display image horizontally in scroll bar? - html

Question

How to display image horizontally in scroll bar? I tried but i am getting output vertically in scroll.Please help me
<div style="width: 1000px; height: 500px; overflow-x:scroll; padding: 5px; display:inline-block; float:left;" >
<div id="slider4" class="text-center">
<div class="slide-img">
<img src="img/team/team1.png">
<p style="font-weight: bold;">B Madhuprasad</p>
<p>Chairman,</p>
<p>Non-Executive</p>
</div>
<div class="slide-img">
<img src="img/team/team2.png">
<p style="font-weight: bold;">Vineet Suchanti</p>
<p>Managing </p>
<p>Director</p>
</div>
<div class="slide-img">
<img src="img/team/team3.png">
<p style="font-weight: bold;">Uday Patil</p>
<p>Director,</p>
<p>ECM</p>
</div>
<div class="slide-img">
<img src="img/team/team4.png">
<p style="font-weight: bold;">Rakesh Choudhari</p>
<p>Managing Director, </p>
<p>Stock Broking</p>
</div>
<div class="slide-img">
<img src="img/team/team5.png">
<p style="font-weight: bold;">Radha Kirthivasan</p>
<p>Senior Vice President,</p>
<p>EDM</p>
</div>
<div class="slide-img">
<img src="img/team/team6.png">
<p style="font-weight: bold;">Nipun Lodha</p>
<p>Head,</p>
<p>Investment Banking</p>
</div>
<div class="slide-img">
<img src="img/team/team07.png">
<p style="font-weight: bold;">Nilesh Dhruv</p>
<p>Head,</p>
<p>Equity Dealing</p>
</div>
<div class="slide-img">
<img src="img/team/team08.png">
<p style="font-weight: bold;">Jayraj Nair</p>
<p>Head, </p>
<p>Depositories</p>
</div>
<div class="slide-img">
<img src="img/team/team09.png">
<p style="font-weight: bold;">Ankur Mestry</p>
<p>Head, <br/>Mutual Funds & <br/>IPO Distribution</p>
</div>
<div class="slide-img">
<img src="img/team/team10.png">
<p style="font-weight: bold;">Cherian MJ</p>
<p>Vice President, </p>
<p>Keynote ESOP</p>
</div>
</div>
</div>
</div>

Answer 1

Define a width to your wrapper, set the white-space to nowrap and finally overflow-x to scroll. The container of the images won't grow beyond the specified width, and the images will all be displayed inside of it. Once the images are too big for the container, they will be cutoff and you get a scrollbar below the slider.
.wrapper{
width: 500px;
overflow-x:scroll;
white-space: nowrap;
}
Fiddle : http://jsfiddle.net/a9zq2Ly2/

Answer 2

try to refer some sources from web
http://www.websitecodetutorials.com/code/photo-galleries/css-horizontal-scroller.php
http://www.wickham43.net/imageswithascrollbar.php

Answer 3

Try this html:
<div class="wrapper">
<div id="slider4" class="text-center">
<div class="slide-img">
<p>1</p>
</div>
<div class="slide-img">
<p>2</p>
</div>
<div class="slide-img">
<p>3</p>
</div>
<div class="slide-img">
<p>4</p>
</div>
<div class="slide-img">
<p>5</p>
</div>
<div class="slide-img">
<p>6</p>
</div>
<div class="slide-img">
<p>7</p>
</div>
<div class="slide-img">
<p>8</p>
</div>
<div class="slide-img">
<p>9</p>
</div>
<div class="slide-img">
<p>10</p>
</div>
<div class="slide-img">
<p>11</p>
</div>
<div class="slide-img">
<p>12</p>
</div>
<div class="slide-img">
<p>13</p>
</div>
<div class="slide-img">
<p>14</p>
</div>
<div class="slide-img">
<p>15</p>
</div>
</div>
</div>
css:
.wrapper{
width: 1000px;
height: 500px;
}
#slider4{
white-space: nowrap;
}
.slide-img{
background: #ccc;
height: 200px;
display: inline-block;
width: 100px;
}
JSFiddle demo