Responsive Wrapper Div For Image Slider

So, I tried to a a responsive image slider using HTML5, CSS3 and jQuery. I have created the slider but it is not responsive. May be because the parent wrapper of the slider is not

Solution 1:

I modified you code in order to display images one beside anothers using display:inline-block on them and white-space:nowrap on the container.

Please look at this updated example.

#slider-wrapper{
    ....
    white-space:nowrap;
}

#slider-wrapper .images img{
    ....
    display:inline-block;
}

The rule display:inline-block is used to tell browser:

"These items are to be treaten as block elements (so they can have height and width, for example) but in the meantime must be considered also as inline ones (so they are not stacked one below others but one beside others, as they would be "words")".

In order to be placed one beside others, is necessary that container would be enough wide to accomodate this long content (otherwise elements would go on next rows like words in a long text). You have a fixed width container, and so you must tell browser:

"don't wrap lines on white spaces, ignore them and place all elements on the same line"