Ajax Loader
×

CSS3 Image Slider

Please check out the Fullscreen view.

I used radio input buttons and their labels with the :checked pseudo class to control the sliding images. So if you change from one image to another the browser doesn't create a step in the browser history (like in other CSS slideshows).

Have fun with my slider :)

Related:

10
X
×

Coding Preferences


HTML

CSS

Javascript

More

19 Comments

× New

Sign In to comment

mos-c:

How can this one be expaned with more slide? (about 10)

ty!

TheKangaroo:

Very nice Idea!!!
But can you just explain, why you have to do that:

input[type=radio]#button-2:checked~.arrows#arrow-1 { left: -19px }

input[type=radio]#button-3:checked~.arrows#arrow-2 { left: -37px }

input[type=radio]#button-5:checked~.arrows#arrow-4 { left: -73px }

(lines 167-171)
and what i have to do, if i have more images?
Where is the law?

MsCliff:

Exactly what I needed! Thanks.

Jacky Lui:

just what i am looking for..great slider.thanks

iwillardsmith:

Your css selectors so long and complex. HTML so overloaded.. man! Hide it and do not show in public. They will copy-paste this code and when someone normal will try to modify it... buthurt will come!

emmgraphic:

Someone knows how can I make this slider runs on Internet explorer 8?thanks

emmgraphic:

Rishabh I have done wht you said me, but in the 6 slide the image doesnt appear its in black, and how can I make it Automatic like my friend ashast1

ashast1:

This is a great slider.. thanks for sharing.. just one query.. what we need to be done to make this a auto scroller.. Please let me know..

thanks,

Rishabh :

@emmgraphic You have to add input, label and li each of them for the new slide. Then you'll also have to add CSS for them as currently the CSS only affects 5 slides not 6. That said, a JS Slider might be a better choice.

emmgraphic:

how can I make 6 slides, when i Make the image doesnt display, anyone knows?

Rishabh :

It's a bit messy to do that. You need to work on both HTML and CSS code. I think both the code can be further simplified, so if you come up with something nicer/better share with us.

simonpicos:

Do you mean the navigation points? - Sure you can :)

In a later version I added a thumbnail effect to the points. Maybe it's something for you ;) http://goo.gl/BQ5pv

Rishabh :

Change the width and height of #slideshow-wrap label:not(.arrows):not(.show-description-label) { to resize.

To change margins you'll find #slideshow-wrap label[for=button-1] and others below it for button-2/4/5, change their margin.

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript
    CSSDeck G+