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

  • cool

  • 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, 😀

  • Nice slider, i love it ♥

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

  • Y8

    You have place nice distinctive views throughout this content.

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

  • 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.

  • 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.

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

  • cai lon gi the nay chu cuoc doi den vai

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

  • Map

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

  • Y8u

    🙂 cc3 js i use backup at cloudflare

  • Aamir Shahzad

    wow… great stuff 🙂

  • ttouinta

    Hello is the code somewhere available for free download?