Ajax Loader
×

Awesome Rotating CSS Image Carousel

UPDATE - The item does not work in Opera and Internet Explorer since they do NOT support CSS3 Animations. Also we got some feedbacks regarding the item being broken in Chrome and Firefox. Please show us some screenshots or make a video/screencast with some software like screenr.com (it's web based) and demonstrate the problem. It will be really helpful!

An awesome CSS image slider that you can use for free. Everything is achieved using the amazing CSS3's animation property. Basically there are four slides that are positioned absolutely in the hidden space. To see how they are positioned, check this link. Then with the magic of CSS3's animmation property, the slides are rotated in anti-clockwise direction and the slide animation is made possible with keyframes. I've added many keyframes to make the slide animation perfect and smooth.

The description part is contained in another set of four slides that are positioned and animated in the same way. However, the third div.slide_info in the html should have the description of first image, fourth slide for the second image, first slide for the third image and second slide for the fourth image. I'll improve this in the version 2 of the slider I am currently working on. 

Both these slides sets are positioned relatively to the viewport (#slider) so that the correct slide is shown with it's description. The fading animation is also achieved by the animation property and keyframes. The whole cycle lasts for 16 seconds and then it gets repeated forever. However, when you hover upon the slider, the sliding animation gets paused so you can focus upon the text or description of the current slide. This is achieved by changing the animation-play-state to paused when the slider is hovered.

Also, please view it in full screen by clicking on the button above or by clicking here. Feel free to use this slider in any way you like (but don't post it anywhere else without proper credits). It will only work in the latest versions of Chrome/ Safari and Firefox for now. 

 

Related:

×

Coding Preferences


HTML

CSS

Javascript

More

4 Comments

× New

Sign In to comment

Rishabh :

simply awesome, really like the rotation + fading effects. cheers!

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript
    CSSDeck G+