The most simple slider with CSS3 transitions

You may use the CSS3 transitions we discussed in our previous post to implement slider by having the slides besides each other using float:left then change the left position of their container, the div containing the slides have sufficient width to make the slides lies beside each other and the div that contains it got overflow:hidden and that's the trick, as we can change left to show the slide we want.

See the live demo for the most simple slider with CSS3 transitions

We have used onmouseover/onmouseout to set a flag that disable the slider while the mouse is inside the box so that user won't get disturbed by the slider movement when he want interact with the active slide content (eg. trying to click the link in first slide).

You may use jQuery or ZeptoJS or any JS framework to generalize the code and you may put onclick on the buttons to make it move to some slide (onlclick="slide_cur=X;").


Comments

Popular posts from this blog

creating CSS3 animations

CSS3 transformation with Rotating gears example

Making minimal graphical operating system