Considering a KISS approach, you could cycle it by setting a `scrollTo(0, 0)` if the scroll position is at the end (something like: `carousel.clientWidth + carousel.scrollLeft >= carousel.scrollWidth) when running the `next()` method. This ensures the carousel will scroll back to the beginning when in the last slide (albeit not like an infinite carousel, but I did mention KISS). Then for auto-playing, just use a `setInterval(next(), intervalYouWantInMs)` and you are set.
Round of applause! I am going straight for the demo, then the repo and then in the project it goes, homepage first. Couple of questions: Why use divs instead of an unordered list to contain the figures? Would that make a difference to accessibility? I definitely see a 'list' of 'images'. Next question. I am going to have to use this for product carousels, and the product images on a ecommerce product page. I will need to add a zoom feature that loads a very large but webp/avif compressed zoom image. Given devices have a native zoom feature and I can just show a basic couple of zoom buttons for full screen desktop, any ideas on the gotchas, regarding accessibility? Or will I learn that by the time I have my homepage slider done? Thanks a million. That was the best accessibility talk ever. I personally search and replace 'accessibility' with 'putting the customer first'. Just thought I would share that with you.
hi! thanks for the kind words =) I was told that a list was the wrong way to markup the carousel because lists create various assumption about interaction and presentation patterns that carousels don't follow. Like a screen reader may announce it as a list of items but the user wont be able to interact with them like they would normally a list, plus it is kinda noise in regards to announcing the contents. Regarding adding zoom and the accessibility gotchas, I'd say just make sure a keyboard can interact with the desktop zoom buttons too. Mobile users can pinch in and pan around, do your best to give a keyboard user a similar experience with their arrow keys. Maybe even consider a dialog element so when the zoom experience is launched, the background page is inert. Thanks for watching, hope this was helpful!
@@AdamArgyleInk I am doing a theme for a Magento 2 store. The frontend was written before CSS Grid and custom variables so it has mountains of less/sass/bloat and does badly at layout shift and so much else. I need a universal carousel and zoom tool, ideally to work with the existing markup for ease of upgrades. None of the 'owl carousels' and other things in its framework are anywhere near what you presented here in technical accomplishment, hence there are lighthouse errors for accessibility. In your series you present ideas that push the weeds back for the likes of me to be able to venture in. Thanks so much! I also learned of postCSS which is so the way to go, thanks to your series! Got my mojo back, I can do these things and the knowledge is easy to learn because it deals with intrinsic things in the web spec not random framework stuff.
For some reason all carousel tutorials skip the cyclical feature that is often requested for carousels. Why is this always so hard with modern dev tooling? And why not properly addressed in this video, who wants to get to the end of the carousel then click multiple times all the way back to the start
there's proposals for CSS overflow to feature cyclical scrolling natively, and I'm kinda holding out for it. I tested a few quick hacky ways to do the cyclical scrolling and it just felt like mess on top of something clean. I'll revisit it and add it later when I've found a good solution that's seamless.
I was impressed by the accessibility. Accessibility has always been a concern for me in these kinds of UI. @Adam Argyle can you add the link to the State Machine, would love to explore that too.
@@AdamArgyleInk as soon as I saw the diagram my first thought was, "wonder if this is Xstate..." sure enough, it's under the hood! what a robust carousel! - had to have been a ton of work - I'm guessing this is one of those legendary 20% projects I've heard Googlers get as part of the employment agreement
Relly nice! Did some experimenting with a cyclical slider like the t-shirt example recently, but it became really complex with uneven number of items. I would really like to see your take on a cyclical slider aswell!
4:43 regarding autoplay and screen readers, disabling autoplay with prefers reduced motion (rather than autoplaying without animation) would probably be a good compromise.
At 3:55 you mentioned that you didn't implement a carousel with loop functionality. Now that's very important. Just today I have implemented it in five different locations on my frontend design. By the way, I've used a third-party library for carousels aka Splidejs.
When I was building a carousel recently, and I looked for accessibility guidance; the not-selected carousel items were aria-hidden instead of inert. Can you explain the pros and cons of the different options. One downside of inert seems to be browser compatibility- could inert be combined with alternatives for better results, or would that just confuse screen readers / accessibility tools?
/* Works in Firefox */ .scrolling-element { scrollbar-width: none; } /* Works in Chromium browsers and Safari */ .scrolling-element::-webkit-scrollbar { display: none; }
for webkit browsers like chrome you could use: .gui-carousel--scroller::-webkit-scrollbar { opacity: 0; } and for firefox you can use: .gui-carousel--scroller{ scrollbar-width: none; }
Regarding accessibility is there a reliable source which says in which order the elements should be placed? current: prev / next / content / pagination What I could also imagine is that the user actually reads the content first via screenreader instead of facing the next button right away e.g. example: prev / content / next / navigation
this is awesome. thanks for building it. I had a question regarding the injecting of controls. what if you want to change the position of the controls, say place the arrows next to each other in the right upper corner?
for now you can easily write your own styles and put the arrows somewhere else! i didnt get time to build preconfigured arrow location alternatives, though I do think that's a great next feature for it
What convention are you using for naming your CSS classes? If it's BEM, then shouldn't it be, for example, "gui-carousel__snap" instead of "gui-carousel--snap"
yea, this is because scrollend is when everything syncs and not when snap has changed. i have proposals for events that would let the pagination stay synced with the scroll snap area in real time, but currently the best I can do is wait for scroll end to attempt to derive which page is in view. check out the proposals here! github.com/argyleink/ScrollSnapExplainers
@Adam Agryle There is so much talk on accessibility and usability just to fail it with the way you display your css code. Hiding the assignment = and the quotation marks " to make it as hard to read as you can make it is just... Not everyone is using this kind of display style and if you are not used to this, this makes reading it a nightmare.
