Skip to main content

Forums

This topic contains 8 replies, has 3 voices, and was last updated by  bearhead 4 years, 10 months ago.

Viewing 9 posts - 1 through 9 (of 9 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.

    #193204

    gcyrillus
    Participant

    This reply has been reported for inappropriate content.

    You may give a try to transition with regulars values and a long to fake a pause/freeze effect, and use pointer-events and focus to start, pause and reverse the slide.
    here is a code pen that shows the idea:

    http://codepen.io/gc-nomade/pen/hlngD

    based on inline-blocks element and text-indent, so it does work with any direction (ltr/rtl).

    You may want to take a look at the step() in transition timing function : https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function

    #193230

    bearhead
    Participant

    This reply has been reported for inappropriate content.

    Thank you both very much for the tips. Implementing both of your suggestions, I’ve got a pretty functional css only slider going:

    http://codepen.io/anon/pen/vExmqy

    The main issue now is that the controls are above the slider. Using the checkbox hack, I didn’t run into this problem because the labels could come after the slider… but now that I’m using :focus for the controls, I can’t figure out a way to get the controls to render under the slider (they must come before the slider in the html or else the ~ selector won’t work).

    Any ideas on how I might be able to change the position of the controls?

    edit: I figured something out for the controls position, but maybe someone has a better way?

    #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.

    #193251

    gcyrillus
    Participant

    This reply has been reported for inappropriate content.

    If you use forms control, then you can make duos of labels and input. input ahead the slider and labels behind.

    forked from your pen, dropping the :focus state and using as you did earlier the :checked state :

    http://codepen.io/gc-nomade/pen/ogZGgV

    Else, display:flex and order, would allow you to reorder position of elements at screen.

    https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    #193257

    bearhead
    Participant

    This reply has been reported for inappropriate content.

    Very nice!
    Quite smart using two radios for pause/play B-)

    I took what you did and made some slight changes to the css:

    http://codepen.io/anon/pen/WbpZOE

    Now, when you click on a circular nav button, the pause button changes to the play button so you can click on it start the autoplay with one click (before you had to click it twice).

    #193267

    shaneisme
    Participant

    Now that you’ve done all that work:

    http://shouldiuseacarousel.com/

    :P

    #193280

    bearhead
    Participant

    This reply has been reported for inappropriate content.

    Haha, yeah I’ve seen that before. I do think sliders have their place though. Particularly in a portfolio type setting where you’re just showing images, not actually trying to get the user to go to slide x, click a link, and buy a product (or some such).

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star