Skip to main content

Forums

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

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

    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.

    #193150
    shaneisme
    Participant

    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.

    #193238
    shaneisme
    Participant

    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.

    #193267
    shaneisme
    Participant

    Now that you’ve done all that work:

    http://shouldiuseacarousel.com/

    :P

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