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.
4:43 regarding autoplay and screen readers, disabling autoplay with prefers reduced motion (rather than autoplaying without animation) would probably be a good compromise.
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!
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.
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?
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
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.
/* 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; }
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.
Yes, cyclical and auto-play are features my clients ask for on a regular basis.
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.
Wow, this is probably the greatest carousel the world has ever seen :).
Adam's videos are always amazing - especially the demos, wow they are awesome!
It's wild how much thought and engineering goes into something you'd think would be so simple. Excellent stuff Adam!!
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.
Same question regarding the divs. We've made one using a list inside a div with listbox role
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.
Dude I'm very impressed. A round of applause! Never ending scrolling was something I could never figure out.
This looks like the gold standard of carousel design, if I need to add one I'm definitely gonna use this! 🙌
Adman always has the good stuff!
I would love to see a second episode where you implement auto scroll and cyclical play :)
Thank you for talking about ARIA. I've always been in being aware of the general or basics about it.
4:43 regarding autoplay and screen readers, disabling autoplay with prefers reduced motion (rather than autoplaying without animation) would probably be a good compromise.
Thanks for sharing. Your voice is so happy.
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.
here ya go! stately.ai/registry/editor/d132db3c-ccbe-4a99-97f9-de162bb65607
@@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!
LOL your HULK mode swiping is crazy :D "huuiaaa huiiaaaa"
Great job, love it!
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.
@@AdamArgyleInk thanks for your great efforts Adam, I would really like a second episode on the same topic (digging deeper into it).
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?
@Adam Agryle What kind of software do you use when showing the carousel scheme?
DevTools and it's emulation features ua-cam.com/video/gOkM1L6azEI/v-deo.html
BTW, I'm not sure if it's still being developed or supported, but I still use owl-carousel.
It's a real hoot.
What you mean about hydration?
Is that a term in ECMAScript?
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
here's where I studied for the foundation of my carousel, it speaks to some of this www.w3.org/WAI/ARIA/apg/patterns/carousel/
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
How did you setup that debugging corner?
local installs of browsers and emulators all shared across a monitor!
That is very cool ! 😎
Fantastic
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.
I'll add it later, but I couldnt find a seamless way to do it. i could definitely add it, but each strategy had a quark and it felt uncanny.
Are you using any tools to automate the lipsyncing on the character ?
For portrait mobile devices the scroll arrows should probably overlap the image and not have a gutter?
totally an easy thing to modify, the :where() selector makes selecting and styling a 0 battle
This is getting spicy pepper 🌶 🌶 🫑 🌶
Thank you for the great content.
I wish we could just hide the scrollbar. looks off on windows
/* 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;
}
@@Wrokzor Safari & Chrome for IOS only support "display: none"
follow the demo link, you'll see an example without scroll bars, it's just an option you pass via HTML!
Awesome, I will steal this if you don't mind :)
The demo doesn’t work in Safari 13... :(
awww poo, sorry about that!
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"
i didnt do strict bem, just something hopefully helpful to read
What i would like to see is a cyclical version of this similar to Netfix where the transition from the start to the end is seemless.
Yep definitely need a cyclical carousel.
How would you speed up the bottom slide indicator kinda lags behind the slide transition
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
Do you really need an aria-label if you already have a title attribute on the element?
Different labels for different users, just tryin to meet them where they are and via the channels their tools are ready to display
@@AdamArgyleInk I think I meant specifically for a case where the title and aria-label had the same text, but I understand the gist 😊
Thank you!
Need somebody to make this one into a WordPress plugin for make better performance
niceee
buggy on safari, maybe for the nesting support
haha ! wow ! that is very cool ! 😎🤙💻
really appreciate the dark Mode !
what if you were to print the page ? what colors would the final output to the printer be ? dark mode or light ?
@@brentmcd12 huh, i dunno! hopefully light mode hehe since that's what color paper usually is
@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.
❤🎉
I can see why you work at Google 😉
1st