Ajax Loader
×

Pure CSS3 Slideshow Without Page Jump

We usually see some CSS3 slideshow experiments with :target selector to accessing each slide. So that if one of the anchor is clicked, then one of the slide that have the same ID with #hashon the URL will be displayed. Something like this:

#css3-slideshow img {
  display:none;
}

css3-slideshow img:target {

display:block; }

But as we know that :target has a bad attitude towards the user interface that will make the page jump every time you click the anchor. We can't blame the browser or CSS because that how the hash works!

The solution is, we will use checkbox or radio hack technique to access each slide with :checked selector. And with that way we will access each slide which is right after the input element:

#css3-slideshow img {
  display:none;
}

css3-slideshow input:checked + img {

display:block; }

That's the concept. This slideshow works in all major browsers (This is a cross-browser CSS3 Slideshow).
Still works on IE9 with a very nice fallback (each slide switch without transition effect). Best viewed on Opera 11.62

Related:

×

Coding Preferences


HTML

CSS

Javascript

More

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript

    Pure CSS3 Slideshow Without Page Jump

    CSSDeck G+