css only slideshow

[bearhead]

I’m try to create a css only slideshow that also autoplays/pauses.

It all works pretty well except for the pause/play.

I’m using radio buttons to create the navigation (checkbox hack) but radio buttons can’t be toggled. Therefore you can’t toggle the pause/play button. You can only pause by navigating to a specific slide with the dots.

So I guess if I could somehow “uncheck” a radio button it would work, but as far as I know that is impossible without js. I can’t use a checkbox for the pause-play, because then it would be possible to to have a radio button and the checkbox checked, and only the latter most instance of the :checked pseudo class would be applied to the slider (which breaks other things).

Here is what I have:
http://codepen.io/anon/pen/qErZEg

Maybe functionality I’m looking for is not possible with only css? – which is fine… I’m more just trying to see if it is possible or not.

[shaneisme]

Not ideal, but perhaps you can pause on hover?

.element:hover {
  animation-play-state: paused;
}

I think you still need all the vendor prefixes for this one though.

[shaneisme]

If you want the controls below the slideshow, you can absolutely position them and adjust the left/right per ID. Kinda clunky, but it would work.

[shaneisme]

Now that you’ve done all that work:

http://shouldiuseacarousel.com/

:P

[Author]

Posts