New Component: Slider

[joesnellpdx]

Vet slider options

Is tinyslider our go to/ guidance?

What about Splide?

Flickity has a paid / licensing setup - so look into this before using (and also a bit buggy at the moment) - so we are not recommending using this solution

Determine guidance, best practices, and recommendations.

Use other 3rd party component recommendations as a reference.

[AlejandroPerezMartin]

Glide could also be a great alternative @joesnellpdx, lightweight and no dependencies

[codetot]

We use Flickity in most cases and it works perfectly. It has a great API and extending ways.

[joesnellpdx]

Another: https://swiperjs.com/

10up internal discussion: https://10up.slack.com/archives/C10D34T33/p1644334365093869

[nicholasio]

Swiper is too big for sites, I don't think it's worth adding ~130kb of js for sliders. Specially for react/headless codebases when building one from scratch is easier compared to vanilla js.

[joesnellpdx]

@Antonio-Laguna ^^ for visibility

[joesnellpdx]

KEY is we need to have a slider script that functionally works the way we need it to is accessible and is lightweight. The a11y part has been the trickiest one and a piece of the puzzle that is a requirement.

[Antonio-Laguna]

@nicholasio I don't necessarily agree with that statement. Creating a simple carousel that uses translation upon pressing a button is easy and easier on React. That is true.

On the other hand, creating a slider that responds to dragging as nicely as a mobile device would, has A11Y options (with aria live and customisable labels for all of the elements), keyboard and multiple scenarios so you can build the slider you need isn't as trivial. Dragging smoothly and all of the handling that it entails is, in my opinion, complicated.

130kb is before any gzipping I presume. I've done a quick test with an empty CRA and enabled A11Y, Navigation, Keyboard and pagination modules on React which is as complicated as it gets in my experience.

Bundle with Swiper:

File sizes after gzip:

  74.87 kB  build/static/js/main.0e0eaa46.js
  4.06 kB   build/static/css/main.b2949aac.css
  1.79 kB   build/static/js/787.bc7d429a.chunk.js

Bundle without Swiper:

File sizes after gzip:

  46.37 kB (-28.5 kB)  build/static/js/main.cb5f43ca.js
  1.79 kB              build/static/js/787.bc7d429a.chunk.js
  541 B (-3.51 kB)     build/static/css/main.073c9b0a.css

I don't think 28,5kb (32 if we count the CSS) after gzip (and with A11Y, Navigation, Keyboard and pagination included) is that big of a tradeoff given it's a library that's heavily maintained and has lots of opt-in features you might want to add or not.

To date, I haven't seen any library or custom module that is lean and checks all the ticks that are usually needed when building different scenarios. I'd love any solution that meets all criteria

---

Edit. To illustrate my point on how sweet Swiper is (I don't get paid I swear) here's a quick gif using Glider (8kb after gzip) on their site with extreme interaction (it also doesn't have any A11Y in mind

Can't cancel mid transitions, doesn't feel natural. It's worse on mobile than it is on Desktop since you're expecting better responsiveness there.

Now same furious interaction but on Swiper with nested sliders on it:

To finalise, I don't think Swiper is a silver bullet and it's a blind go-to option every single time. It has an important cost in terms of sizing and you might not need all that it offers. I'm simply trying to illustrate that it is indeed heavy but because it checks a lot of ticks in terms of essential features.

_{@AlejandroPerezMartin don't meant to berate your option, Glide looks awesome! You know I ❤️ u}

[Antonio-Laguna]

@devinle ping here given you just asked me about this, this expands a bit on my private answer

[nicholasio]

Even with gzip the browser still have to parse 130kb worth of JS. Unfortunately swiper isn't going to be the only JS lib that a sites needs, hence my concern for adding ~30kb gzipped for a single feature of the site.

I agree that swiper is great and one, if not the best option out there for slides but unfortunately your thought process has led to sites with very big bundle sizes, if you're just using swiper that's ok, but it adds up and before you can realize, there's 600kb-1mb worth of js being shipped to the browser.

I think there are lots of libraries where their target audience isn't necessarily sites which need to perform well on core web vitals. If you look at the swiper target audience, they are targeting web/ios/android apps:

I'm not sure if we need that much JS to handle all the things you mentioned but I worry that we make a blanket recomendation of such a big library.

[Antonio-Laguna]

I feel like, as with everything in life, it depends which is why I've said this before:

To date, I haven't seen any library or custom module that is lean and checks all the ticks that are usually needed when building different scenarios. I'd love any solution that meets all criteria

And also

I don't think Swiper is a silver bullet and it's a blind go-to option every single time. It has an important cost in terms of sizing and you might not need all that it offers. I'm simply trying to illustrate that it is indeed heavy but because it checks a lot of ticks in terms of essential features.

My suggestion with Swiper is because it works well, it's well maintained and it checks everything except for performance.

There're lots of things you can do to mitigate the cost of Swiper such as lazy loading the library but those are pre-optimizations and everything depends on how things are architectures. There are also lots of thinking to do on the project's needs such as, are there more libraries involved? What's the expectation? What's the budget?

unfortunately your thought process has led to sites with very big bundle sizes

I'm not sure where my thought process has led to that or where I have suggested blanketly adding libraries without pondering needs. It depends per project and depends on what you need and what you're trying to do. As an analogy, GSAP is often recommended for transitions and animations but it's far from a silver bullet either, it also has a big cost when we could use some other tricks.

Unfortunately, with sliders, I feel the matter is more complex as I've gotten complaints from clients when sliders "don't feel natural". And given accessibility is a must, this is the only one I know meets the criteria. If you have better suggestions that meet every need that are often found I'd be more than happy to try and suggest that from now on!

[nicholasio]

I'm not sure where my thought process has led to that or where I have suggested blanketly adding libraries without pondering needs. It depends per project and depends on what you need and what you're trying to do. As an analogy, GSAP is often recommended for transitions and animations but it's far from a silver bullet either, it also has a big cost when we could use some other tricks.

Didn't mean to say you were suggesting blanketly adding librarties without pondering needs. My concern is mostly around the fact that if we say "X is our go-to library" most engineers will use them without giving it a second thought (and wouldn't blame them at all).

It sounds like given the complexitty of sliders we won't be able to come up with a single recommended solution and we would also need to come up with guidelines to choosing one from a set of recommended list.

I actually think having general guidelines for choosing a library would be great!

[Antonio-Laguna]

Completely agree with that!

[devinle]

Thanks for the great/thoughtful feedback here @nicholasio and @Antonio-Laguna This is a healthy debate for sure! I'm definitely enjoying the library, as Antonio said, it answers the call! But I hear the file weight concerns as well.

@joesnellpdx has also mentioned a potential CSS only solution for my use case, which might be simpler than all of the features provided by Swiper. Will keep you posted on this thread.

[devinle]

Have worked a bit further on this feature. For my purpose, which I'll admit is very simple:

• mobile swiping
• snap scrolling
• reveal (see a bit of the next item)
• responsive

The CSS only option works perfectly. Fortunately, I don't need things like Navigation, Pagination or anything too feature rich. Mine is simple. But, knowing this is an option is great.

For further info, see here: https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type

This replaces the 138kB / 38kB (gzipped) library with 10-15 lines of CSS. Not bad for my needs here. Especially given, this is only available to a single component that isn't used a great deal across the site we're building.

Thought I'd share in case this helps anyone else.