A Carousel component - Githubissues

Financial-Times / origami

The Origami Component System

58 stars 14 forks source link

A Carousel component #23

Open chee opened 4 years ago

chee commented 4 years ago

here's a video carousel on ft.com/video:

here's one on globetrotter Globe Trotter carousel:

here's the same one on the app on the app:

there should be a new carousel component to replace o-gallery

notlee commented 4 years ago

Questions:

Would we consider the drop shadows part of the carousel, so if it were used for anything the items would have the same shadow? Or do only teasers within a carousel get a drop shadow? Probably should be an option.
We don't want scroll arrows on the app?

rowanbeentje commented 4 years ago

At the moment, the app (and globetrotter) use http://swiperjs.com , which is absolutely enormous. We want a fairly simple carousel, but with scroll snapping.

Will Howard has in the past attempted to replace swiperjs with a CSS scrolling carousel component, which was great (https://github.com/Financial-Times/ft-app/pull/448) except for one thing: on Chrome Android, using scroll snapping seems to do really weird things to inertia, leading to the carousels feeling far too slippery and flingy. So we had to go back to swiperjs 😭

We haven't done a lot of investigation into the slipperiness issue to see if we can work around it somehow.

notlee commented 4 years ago

Thanks for the info @rowanbeentje!

chee commented 4 years ago

i guess if we wanted to use a css-based scroll snapping we'd need to use only the features of it supported by ie11

notlee commented 4 years ago

Another example here on markets.ft.com/data/archive Screenshot 2020-11-18 at 13 57 03

rowanbeentje commented 4 years ago

(In the meantime, we've moved app and globetrotter-in-app from the enormous swiperjs to the slightly better https://www.npmjs.com/package/embla-carousel )

rowanbeentje commented 3 years ago

I think this was accidentally tagged? Reopening (hope I haven't got that wrong...)

JakeChampion commented 3 years ago

Yes it was, thanks for re-opening this

ft-vladislav-hadzhiyski commented 7 months ago

Hey Origami team Another use case for carousel component could be the FT Professional join forms carousel on welcome page

The Figma docs is here

Currently we are using embla carousel which is a library which deals with all UI interactions & events but the UI is 100% customisable. They don't provide any ready to use React components. I will post a link to the source code when we have it ready and merged to main.