Ajax Loader
×

Pure CSS3 Content Slider

Content Slider in Pure CSS3 without any Javascript by Caleb Jacob.

The progress bar, moving slides and the container shaking on every slide, all of these effects are achieved with animations. For the progress bars, the width increases along several keyframes. Images slides left by setting large negative left offsets along with opacity changes for a nice transition. Shaking of the entire slider on every slide is done with the rotate() transform function in several keyframes. If you have fair amount of knowledge about animations, transforms and transitions, then there's nothing too complex in the experiment.

On mouse hover, the animation pauses due to the usage of animation-play-state: paused;.

Following are some of the major drawbacks of the slider (or CSS sliders in general), as mentioned by the author -

  1. Cross Browser Support: In the current state, CSS3 Animations are only supported by Webkit browsers (Chrome, Safari) and Firefox. Opera and Internet Explorer do not support them which does still have significant market share.
  2. Manipulating Slides Count isn't Easy: The slider must contain exactly 4 slides, not less, not more. Altering the number of slides will need alteration in the CSS Animation code too.
  3. No Practical Way for Navigation: There isn't any proper way to add slider controls that can be used in a real world scenario. You may use the :target pseudo class or input[type="radio"] + label , but neither of them are proper solutions IMHO.

So, basically, Javascript is still the way to go for such use cases, but this was a neat experiment to see what CSS is capable of and learning the new CSS3 features.

Read more information about it at the experiment's website.

Related:

×

Coding Preferences


HTML

CSS

Javascript

More

4 Comments

× New

Sign In to comment

Rishabh :

@zivallh you'll have to do some work on the keyframes too ;)

zivallh :

how to add more images
i have change the #slider ul {width:} but it didn't work

Kushagra Agarwal:

I tried using % in place of px but it didn't work. I don't think if there's any way to do this without the use of jQuery or JS. But I'll keep looking for it.

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript
    CSSDeck G+