The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS css only slideshow

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #193122

    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:

    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.


    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.


    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.


    Now that you’ve done all that work:


Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.