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

Minimal slider using css animation for a fade effect.


  1. The fade is clean

  2. Great slider - simple and clear, thanks! But is there any way to add prev/next arrows like http://cssslider.com/ ?

  3. @stursberg sure. You just have to use styled labels associated with checkboxes. when a checkbox is checked (i.e a slider dot is click) you use the next sibling (+) css selector or the general sibling one (~) and set the divs animation to none and the backround to the one corresponding to the clicked dot.

  4. Thanks for the reply, I'll try this tomorrow!

  5. I'm having trouble getting 7 slides to rotate correctly. I'm not understanding how [ animation:round 16s infinite; ] relates to the slide seconds [img:nth-child(2){animation-delay:8s;}]. I would like to have 7 slides with 5 seconds between each. I would appreciate any help.

  6. @careyee I changed the code to use scss.

    you can put as many images you want in the container and then in the css section just change the $slides and $time_per_slide variables. In your case $slides: 7; $time_per_slide: 5;

  7. Very clean slider and easy to configure. I used it as the basis for another Pen with a very simple JQuery to pause the animation and toggle the text on the button. Of course, proper credit given to you. Thanks for sharing! I am a sucker for simplification. If you have time, check it out and let me know if anything is a miss or if you see potential to make it even simpler. Here is the link: http://codepen.io/gransalamandra/pen/QNywLy/

  8. Thanks Elton, you saved me a lot of unnecessary bloat with this!!

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

You must be logged in to comment.