Responsive CSS3 slider without Javascript

CSS - Responsive / Added on April 2, 2012 / Add to favorites

CSS3 Responsive Slider is, as the name implies, a responsive CSS3 slider without Javascript. The actual slider is much like any JavaScript slider. It floats all of the content areas (articles) next to each other. And then hides the overflow. We then animate the margin of the inner div, so if we have 5 articles, moving the left-margin -100% would give us the second article. To save our input we are using radio buttons. As mentioned above you could also use :target and anchor links, but it doesn’t mimic Javascript in the same way as you would only be able to handle one action at a time, you would end up with a bunch of items in your history (clicking back would turn the slider back one), and it’s been done before.
Responsive CSS3 Slider Without Javascript

  • http://twitter.com/designofseven Luca Bertaiola

    cool

  • http://twitter.com/glenn_ferrell Glenn Ferrell

    Nicely done. Good link to explanation but it would be nice if the actual code were available.

    • Nerissa Rankin

      Yeh really nicely done, easy to use. Hey the code is in the Page source, :-D

  • http://vietdesigner.net/ VietDesigner.net

    Nice slider, i love it ♥

  • http://www.kizi2.com/ kizi 2

    I liked the content you have given here. Very informative. Good post.

  • http://www.y8u.org/ Y8

    You have place nice distinctive views throughout this content.

  • http://www.y8friv.asia/ Friv 4

    Besides considering your views, I understand your article partaking and refreshing. Thank you.

  • http://www.yepibugy.com/ Yepi

    How sometimes I end up reading boring and poorly written on-line content. this text was a breath of recent air from all the others. you produce some nice points given with distinctive and attention-grabbing content.

  • http://www.friv2.org/ friv

    How sometimes I end up reading boring and poorly written on-line
    content. this text was a breath of recent air from all the others. you
    produce some nice points given with distinctive and attention-grabbing
    content.I liked the content you have given here. Very informative. Good post.

  • http://www.kizi-2.org/ Kizi 2

    Responsive CSS3 slider without Javascript. I appreciate your work. Thank

  • http://www.minecraftgames.info/ minecraft

    cai lon gi the nay chu cuoc doi den vai

  • http://www.minecraftjuegos.com/ Minecraft Juegos

    It is possible and we humans invent something more valuable than that.

  • Map

    I liked the content you have given here. Very informative.

  • http://www.y8u.org/ Y8u

    :) cc3 js i use backup at cloudflare

  • Aamir Shahzad

    wow… great stuff :)