Implement Content Carousel Component

[ChristianMurphy]

Implement a carousel component that can render a category of portlets. Similar to https://christianmurphy.github.io/contented-ui/alternate/three-content-hero/

[ChristianMurphy]

/cc @cousquer @jgribonvald

[cousquer]

Heya @ChristianMurphy 👋

And what if we can improve its accessibility ? 😄 about the arrows buttons here are the rules and a fix : The size of the target for pointer inputs is at least 44 by 44 CSS pixels https://www.w3.org/TR/WCAG21/#target-size Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. https://www.w3.org/TR/WCAG21/#focus-visible

in slick-theme.css:21

.slick-prev, .slick-next { font-size: 0; line-height: 0; position: absolute; top: 50%; display: block; width: 44px; height: 44px; padding: 0; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); cursor: pointer; color: transparent; border: none; background: #007BFF; z-index: 1; }

in slick-theme.css:44

.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { color: white; outline: 1px solid blue; background: darkblue; }

[jgribonvald]

Well I have a better understanding of what you mean by carousel... Really nice !

After I have some questions/feedback :

Why having prev and next buttons in sm/md devices ? Is it needed ?

As example : https://css-tricks.com/creating-responsive-touch-friendly-carousels-with-flickity/ it permits to see a part of the next content so in this case the user know that he can slide on... If you whatch on google play store you have the same carousel, in my mind we should have a same carousel approach.

Also is it needed to make a "zoom" to have at least 3 items ? and keep around 320px min width ? on small devices it's hard to read easily, doing like my previous example on css trick would be great. what do you think ? Also do you think that we would be able to open a description hover the item picture when clicking on the carousel item ?

After testing on my smartphone the carousel doesn't work verry well, their is a problem in transition between each items when doing a slide movment.

[cousquer]

Beware, @jgribonvald Flickity is under the terms of the GPLv3... https://flickity.metafizzy.co/#license. And it doesn't fit well with Apereo License, unfortunately.

[jgribonvald]

@cousquer yes and it was only an example that I provided...

[jgribonvald]

On an other way how are you feeling about to make possible the reordering of some elements like for favorites ? I have this example : https://medium.com/@alexandereardon/rethinking-drag-and-drop-d9f5770b4e6b or one other interesting Accessible Drag and drop : https://salesforce-ux.github.io/dnd-a11y-patterns/#/canvas?_k=bbb4lg https://salesforce-ux.github.io/dnd-a11y-patterns/#/sortB?_k=g2rk35

[ChristianMurphy]

And what if we can improve its accessibility? :smile:

Instead of slick carousel, I'm looking at https://ssense.github.io/vue-carousel/ as the base to start with. For the screen reader it renders all the carousel pages together as a single list so there should be less to worry about.

Why having prev and next buttons in sm/md devices ? Is it needed ?

I think the buttons will be needed. Not all users on small screensizes will be using touch controls. Users nagivating with a mouse and keyboard need a way to see the next page as well.

After testing on my smartphone the carousel doesn't work verry well, their is a problem in transition between each items when doing a slide movment.

I'm switching over to https://ssense.github.io/vue-carousel which has better touch handling that slick carousel does.

On an other way how are you feeling about to make possible the reordering of some elements like for favorites ?

My current thought is this would be a separate full page experience, rather than inline in the carousel.

[jgribonvald]

slick carousel isn't a bad one, but it seems that the centerMode give some problems...

After I think having an infinite scroll would be better. For buttons I'm agree that we need it at least for desktop, but on mobile it could be removed as if you have an infinite scoll with cut item at begining and end of the window/canvas the user will understand that he has to scroll ...

About the possibility of reordering you provide a good point, the scrolling part will cause problems, but why not from a keyboard selection (like on links provided on salesforce-ux site)...

[ChristianMurphy]

slick carousel isn't a bad one

I agree, slick is a nice carousel. For the production ready version I want to avoid libraries that bundle jQuery. We have enough copies of jQuery in uPortal already (3+). the Vue version of slick (https://github.com/staskjs/vue-slick) requires, yet another copy of jQuery to be embedded. https://ssense.github.io/vue-carousel/ leverages vue intrinsics.

After I think having an infinite scroll would be better

Infinite scrolling like http://scrollmagic.io/examples/advanced/infinite_scrolling.html ?

why not from a keyboard selection

like https://build.fluidproject.org/infusion/demos/reorderer/imageReorderer/ ?

like on links provided on salesforce-ux site

Do you have a link to the demo page you are thinking of?

[jgribonvald]

After I think having an infinite scroll would be better

Infinite scrolling like http://scrollmagic.io/examples/advanced/infinite_scrolling.html ?

the infinite scroll was for for the carousel, ie you can always scroll and get back to first item when there is no more item to scroll... the slick carousel have this option.

why not from a keyboard selection

like https://build.fluidproject.org/infusion/demos/reorderer/imageReorderer/ ?

Yes this one also.

but this link too : https://salesforce-ux.github.io/dnd-a11y-patterns/#/sortB?_k=g2rk35