Question

I am creating an image slider and only 2 images are displaying at a time, there are two arrows on left and right to move the images, I have to place the image horizontally, but only two images are coming inline and other images are going down, I set overflow hidden to the image container, I can’t set the width of the container as the number of image may very dynamically

so how can I set all the images horizontally (2 images on screen, others are hidden as the container property overflow:hidden)

the blue is the container and green boxes are the images.

code

        <div id="slidearea">
<div id="slider">

        <img alt="image" id="0" src="images/thum-1.jpg" style="margin-right: 5px; opacity: 0.5; border-color: rgb(255, 255, 255);">

        <img alt="image" id="1" src="images/thum-2.jpg" style="margin-right: 5px; opacity: 0.5;">

        <img alt="image" id="2" src="images/thum-3.jpg" style="margin-right: 5px; opacity: 0.5;">

        <img alt="image" id="3" src="images/thum-1.jpg" style="margin-right: 5px; opacity: 0.5;">

        <img alt="image" id="4" src="images/thum-2.jpg" style="margin-right: 5px; opacity: 0.5;">

        <img alt="image" id="5" src="images/thum-3.jpg" style="opacity: 0.5;">
        </div>
        </div>

Answer 1

You do this by using white-space & inline-block properties.

For example like this:

#container{
    overflow:hidden;
    width:300px;
    margin:30px auto;
    background:yellow;
}
#container #slider{
    white-space:nowrap;
}
img{
    opacity:0.5;
    display:inline-block;
    *display:inline;/*IE*/
    *zoom:1;/*IE*/
    background:red;
}

Check the fiddle http://jsfiddle.net/SNeVH/1/