Create A Slideshow With Pure CSS (Easily)

Design Made In Germany, a website listing creative works of German agencies and designers, is sharing a slideshow created with pure CSS.

It has a nice slide effect that works in all modern browsers -which also degrades gracefully when needed- using the CSS3 transition property and transform property's translateX function.

Pure CSS Slideshow

Every page gets its own URL using hashtags for direct links and history is not broken.

There is no tutorial provided, however, the source of the slideshow is very clean and has only few rules to follow.

Tip: Don't forget to check the meta tag with name="viewport" used for mobile browsers.

  • Eduardo Marques

    Those guys at DesignMadeInGermany sucks just because they don’t respect Internet Explorer users.

  • Daniel

    Why should anone respect Internet Explorer users?!

  • Nagual

    “Those guys at DesignMadeInGermany sucks just because they don’t respect Internet Explorer users.”

    Perhaps if IE could respect users, this couldn’t happen.

  • Eduardo Marques

    I am a Firefox user and I don’t force anyone to use only what I like – I respect people.
    According to you, lets kill IE users! Yeah, kill them all, burn them all, send them to hell! Lets do the same what Hitler did! You guys are going to make this world much better, huh? Mr. Bill Gates is the devil at Earth! Wow… you have the wisdom!!!
    IE don’t respect you? Don’t use it!!!
    Why respect others? To be respected the same!!!
    Have a nice day! πŸ™‚

  • Nick

    It does not work on the iPhone.

  • sLIVER

    Breaks the back buttons too… πŸ™

    Neat though none the less!

  • 1. Stop optimizing for IE and people will stop using IE. So you can say: Optimizing for IE is like supporting IE.

    2. I dont have the time to code everything twice just because Microsoft wants to rule the standards.

    3. People get free content on our site. They just need a good browser.

    4. Our audience isnt using IE. I love em πŸ™‚

  • Istamar 9

    ok. look simple and great πŸ˜€

  • zee

    where is the source file for this slider? I Just have to inspect/save page to get it?

  • @zee,

    Yes, the source is the page itself.

  • sam

    Internet Exploder (IE) is like the stupid kid in class that keeps holding everyone back. The future of CSS is here and people need to stop using IE until they decide they want to catch up.

    If you know your users use IE then yes be respectful, but if your audience doesn’t then screw IE.

  • zippy

    if yo can’t design for IE you are a fool.

    Your nrowser sucks!