16 comments

  • Emmanuel HerreroEmmanuel Herrero, 8 years ago

    I made it into an automatic slideshow with a "Play" button.

    http://codepen.io/hairarrow/pen/LVZJYb?editors=110

    1 point
  • Bogdan SoareBogdan Soare, 8 years ago

    Thanks for sharing this.

    The alternative radio buttons solution would be something like this

    1 point
  • Chris SilvermanChris Silverman, 8 years ago

    One comment: All slides after the first one won't be accessible on any browser without :target support (like IE7 and below). I don't know how much of a concern that is, but if you wrap the styling in a "@media only screen" query, that will block the absolute positioning from older browsers, so the content will at least be accessible. (Maybe this is what Josh meant.)

    The other thing you could do is have CSS-only arrows that don't require images at all. Setting a top and left border on the arrow links, and then rotating them 45° (left arrow) and 135° (right arrow) would allow users to modify arrow color, as well as :hover and :active states. More easily configurable, and saves an HTTP request :)

    This is great. Thanks, Dan—very useful.

    1 point
    • Dan CortesDan Cortes, 8 years ago

      Hey, thanks for the comment.

      I've only ever used media queries for responsive breakpoints, never as a conditional for older browsers. I'll keep that in mind as a use for them from now on.

      Also, CSS arrows are a great idea. I'm thinking about updating this blog and using radio buttons, and I'll incorporate that feedback as well. Thanks again.

      1 point
  • Josh GreenJosh Green, 8 years ago

    this is a terrible idea.

    the text is not accessible and cant be selected on some tabs.

    1 point
    • Dan CortesDan Cortes, 8 years ago

      What do you mean not accessible and can't be selected on some tabs?

      2 points
      • Mason LawlorMason Lawlor, 8 years ago

        I'm also curious what he means. Works great for me, and I bookmarked it to use it soon. Thanks for the write up!

        3 points
        • Dan CortesDan Cortes, 8 years ago

          Hey, thanks man. I've tested it out on a bunch of browsers and devices and haven't seen any issues either. The jump links kinda break the back button functionality, but I don't think there's anything I can do about that :(

          0 points
          • Chris HorakChris Horak, 8 years ago

            You could theoretically accomplish this with hidden radio buttons and that should solve the back button issues.

            0 points
            • Dan CortesDan Cortes, 8 years ago

              Yeah, I've gotten that feedback a lot over on /r/web_design. Radios definitely would've been the way to go. I'm going to update the blog as soon as I get the chance :-)

              0 points
          • Mason LawlorMason Lawlor, 8 years ago

            Oh I didn't notice that the first time! Yeah it's not a huge deal, but it would probably confuse some users. Feel free to update me on this thread if you find a solution, I'll do the same.

            1 point
  • Dell Krauchi, 7 years ago

    Hello, Great code. Thank you for this! Just a question, "How can you prevent the carousel returning to the first slide on the re-enabling of Play? Thanks again! Dell

    0 points
    • Dan CortesDan Cortes, 7 years ago

      Hey Dell. I would just remove the .arrow-prev link on the first element, and the .arrow-next link on the last element. Let me know if you need any help.

      0 points
      • Dell Krauchi, 7 years ago

        Dan, Thank you so very much for the reply! I did the removals as noted, and though the prev and next arrows were removed from the first and last slide, the autoplay functionality is still performing the same. What I mean is this, on the first load, the carousel is set to autoplay. When you select either prev or next, the autoplay is disabled. Let us say you are on slide 3, when you enable Play, the carousel jumps back to slide 1. So, my question is, "Is there a way to get it say on the selected slide when the Play feature is selected?" Thank you, again, Dan. Dell

        0 points
  • David DarnesDavid Darnes, 8 years ago

    Fun idea, I think I've seen it done before but slightly differently.

    Personally wouldn't use it as it's quite limiting and browser support could bring up some interesting bugs. Always interesting to see what's possible though.

    0 points
  • E BensleyE Bensley, 8 years ago (edited 8 years ago )

    A great use of CSS, I've encountered similar situations before when making slide-out menus and gasp hamburger trays. The problem I faced which also seems to be a problem with this implementation is the resulting browser history mess requiring you to back through every slide change to leave the page. Sadly I don't think there is a solution to this at the moment.

    0 points