css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

A 100% pure CSS image slider with next/previous buttons, nav dots and image transitions.

Updated with simplified HTML and CSS, better image transitions and resized images.


  1. Incredibly clever CSS here. Congratulations. :)

  2. Very nice image selection!

  3. Very clever to use the CodePen Class Fabric as the background.

  4. Well done with respect to the usability & animation, but I felt dizzy after a few slides. Thinking it would need some tweaking before it's ready general-purpose uses.

  5. Is it possible to make it auto-slide? For example, every 5-10 seconds it animates into the next slide img?

  6. @Kyle Bavender, Just change the animations, you could have on that just shrinks while fading while the next image fades in quickly... or almost anything you wanted.

  7. @Jonathat Graft, Using the method I am, I think you'd need JavaScript to change the radio selection, but i'll look into it.

  8. how to get the codes?

  9. in this thing CSS image slider w/ next/prev buttons? pls help. tnx :)

  10. I'm not quite sure I understand what you're saying, the source code is here: http://codepen.io/AMKohn/pen/EKJHf If you want the JS one then that's here: http://codepen.io/AMKohn/pen/KjAHJ

  11. nice image slider

  12. nice image slider

  13. Hey there! I'm putting your slider to use on my website -- I think it's great. A question (keeping in mind that I'm not a coder, but know a teensy bit about CSS): I'd like some text to appear over certain sliders. You know, like "Click Here to Order!" or whatever.

    I thought that, within the HTML, if I put a div id with a high z-index that might work, but it didn't. So I thought perhaps I needed to assign a z-index to the slider in the style sheet but I can't seem to figure it out.


  14. Just put your slide caption inside the .slide container.

    I forked it with a demo here: http://codepen.io/AMKohn/pen/pBgxn

  15. Hi there! Love the slider - however I can't seem to get it to scale responsively. Help? :)

  16. @chelsaur The problem with scaling it is the line-height on the labels.

    If this isn't an issue for you than change the hardcoded heights for everything to percentages and move the entire .nav section to just before the img element.

  17. First of all: thank you very much for this great piece work.

    As I'm not yet into coding a lot but "know a teensy bit about CSS"^ as well, I'd also like to ask a question: is it possible to hyperlink the images themselfs, or, as an alternative, put a hyperlink into the caption?

    Thank you very much for your answers!

  18. @kalletheodor Sure, just change the .slide element to an anchor (<a href="%7B%7Blink%7D%7D"></a>) and add your link.

  19. Very nice, it works really good.

    But i ran into a problem when i put 2 separate sliders on the same page. One of them just has a blank (white) starting image. Is there an easy fix to this? Thx.

  20. @Aske You need to change the name attribute on the radio buttons (``).

    Out of a group of radio buttons with X name only one can be checked. That's how the nav dots work.

  21. That was indeed a very easy fix. Thank you!

  22. Hi !

    I have a big problem on iOS device. Clicking on next or previous slide cause a 2 second latency when there is more than 10 images (150 ko each one).

    Is there a way to fix it ?

    Thank you.

  23. Hi

    Great slider code. I only want to use the navigation radio buttons and not he left right arrows. How do I disable them.



  24. Hi again

    On second thoughts, how can I reposition the left and right arrows on either side of the nav dot radio buttons and keep all the navigation controls together.

    Thanks again

  25. Hi

    I also noticed the cool way you have the loading icon twirling next to the submit button. Is there a sample code I can use.

    Thanks again

  26. Hi

    I love the slider. It's working great.

    Someone asked earlier about having javascript making it automatically switch between pictures. Did you get a chance to look at that yet? It would come in handy for a job I'm working on.

    Thank you!

  27. why the images can take a link on them???

  28. Hi!! Is there any way it starts automatically?


  29. Great slider - very close to what my client is looking for. The only drawback is no autoplay on loading - can it be implemented? Also, I'm not sure if it's possible, how to add support for touch-swipe in pure CSS? Already tried http://codepen.io/pixelgrid/full/hjBrE/ - pretty good, but doesn't have some functionality by default and http://cssslider.com/ - too complicated for me.

  30. @stursburg, This was meant as a demo, not as something that could be used in production. If you have anything that gets more complicated then you should use JS.

    But, if you absolutely must have a pure CSS slider, then you can look at the code used on cssslider.com and adapt it. They use two other radio buttons for playing and pausing so that as soon as a nav button is used the autoplay stops.

  31. Anyway to add a hash to this slider so I can go directly to an image?

  32. very nice and good idea !

  33. Pretty cool, didn't read every single comment so my apologies if this was already said, but it would add that extra sense of realism if the transition worked in reverse when I clicked the back (left) arrow. But good job!

  34. Very very nice slider and I appreciate that it doesn't use jQuery.

    I used it for a website but I noticed that the radio buttons don't appear at their place at the bottom center, but instead appear at the bottom left corner in a vertical line on top of each other. I am not a clever coder, just good with some HTML and CSS, so I copy-pasted everything as it is and merely modified the "@import" to "link" since import didn't seem to work in my stylesheet css file.

    I am using the latest firefox and chrome. Any advice on what could it be?

  35. This is a great image slider. Question- Im trying to link to different parts of an image slider but am unable to get it to work. I tried your version and adding a name"" tags but not working. just looking for help. Thanks alot.

  36. By reading the comments fully (sorry) I have another question to ask. div class="slide" is this the element to change? and do we add the a href="{{link}}" instead or do we add it into the div tag? Im know abit of html and css but this has stumped me lol.

  37. @Kiwi_Matt Please see my comments above, this was really only meant as a demo. If you want a practical use slider please take a look at cssslider.com.

  38. I like the work!

  39. Thank you so much! I was desperately looking for something like this, because I don't know anything about Javascript. I used your code multiple times on the same page, I changed the name attribute of the radio buttons (like you said) and I also changed the id for every radio button, and it works perfectly! I really appreciate the work you've put into this. Thanks again for sharing!

  40. It 's cool slider! But I have a remark. It will not work correctly if you place some sliders on one page because two radio inputs cannot be checked inside one form entity. Putting all slider code inside form tag solve the problem but it's not good practice, IMHO.

  41. I solve the problem that I described above. Also replacement with div instead of ul and li allows to fix errors in markup validation. My code looks like there: http://codepen.io/bogdan_017/pen/LbbGpy

  42. ED @EDstartscoding on


  43. superb .. if you could set this to autoplay mode somehow it would be awesome

  44. and why you've used user-select: none; is there a specific reason for that step?

  45. Excellent Slider Thank you!

  46. Very clever Solution !

  47. I love this code. However, I can't get it to work with Safari browser. Are you aware of what I'd need to get this to work on Safari?

  48. I've mashed up this slider with Lozad on a GitHub page to add IntersectionObserver based lazy loading! I also improved the label selection CSS by rearranging the labels and using two sibling selectors.


Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.