Implement new carousel of cards

[manuq]

Design ticket: https://github.com/endlessm/endless-key-content-private/issues/13

The current component packages/ek-components/src/components/EkSlidableGrid.vue uses <b-carousel /> https://bootstrap-vue.org/docs/components/carousel from the framework we use, BootstrapVue. We want to have a better UI experience.

• Find a ready-made Vue component that suits our needs (eg one of https://vuejsexamples.com/tag/carousel/)
• Or find a "vanilla" Javascript and wrap it in a Vue component (eg https://glidejs.com/docs/)
• Or modify <b-carousel /> to suit the design requirements

Requirements are:

• Must expand to the full page width
• Must be touch-friendly
• Must be responsive
• Must be accesible

[manuq]

Today I played with https://vue-ssr-carousel.netlify.app/ and I'm very happy with the results. To the point that I was able to do feature-parity with the current carousel of cards in this PR: https://github.com/endlessm/kolibri-explore-plugin/pull/685

Here is a demo:

https://github.com/endlessm/kolibri-explore-plugin/assets/83944/ffc841cb-3909-4aea-a176-2dacbfdab460

Please note that it is interchangeable with the previous slider but the parenting is not exactly the same. Because the new one occupies the full page width, so it shouldn't be inside another (non fluid) <b-container>.

Also note: this adds a new JS dependency so please run yarn install for testing.

[manuq]

From @jofilizola:

1. Yes, arrows for accessibility!
2. We need to figure out the margins, for bigger screens there’s a huge empty space in the left. I have mock ups for the discovery page, but that will affect the channels as well, so I need to work on it, but I will link the discovery page study.
3. Finally, scrolling with two fingers to scroll through the slides horiIntally: my first try was doing that then I triggered the browser back button. I think this is something we should fix..

[manuq]

This needs more iterations between design and implementation. So I'm deasignning myself for now.

I agree with Joana that this would work better with a fluid container. But then what to do with the other cards sections like the search page? Should they be fluid for consistency too?

Regarding arrows: The showArrows attribute can be added for quickly testing the built-in arrows from the vue-ssr-carousel project. Or the #back-arrow #next-arrow slots cen be used for adding our own arrow buttons. It's all explained in https://vue-ssr-carousel.netlify.app/ui

[jofilizola]

Thanks Manuel! I will create similar mockups for the other pages where we have cards and what happens with different components and other elements. Here is the mock up we have: https://www.figma.com/proto/ItL7d0N9yJALcu12S50dQn/EK-Ladybird?page-id=248%3A137084&type=design&node-id=612-185666&viewport=645%2C-17%2C0.37&scaling=scale-down&starting-point-node-id=612%3A185666&mode=design&t=wWIVjJTS5KRdvIbl-1

[jofilizola]

Margin Adjustments:

https://www.figma.com/file/Mwgjbi2CHUoTMdkE9aGQfP/EK-M?type=design&node-id=326%3A26335&mode=design&t=LfLbExFqJuR1e8MO-1