86
Views
4
Comments
Solved
[OutSystems UI] New UI component Interaction\Carousel is broken when selecting >1 itemsPerSlide.
outsystems-ui
Reactive icon
Forge asset by OutSystems
Application Type
Reactive

Hi,

The current UI component provided in the new Outsystems UI update (which deprecated your old Carousel and added a new version), is not working as intended. Will need this to be fixed as soon as possible, thanks.

Reproduction steps:
- Import the module "Interaction\Carousel".
- Set these settings: 2 items per slide and no autoplay or loop.
- Assign the Carousel to a Binary list (images).
- Append 3 images to the binary list any way you want.
The image should now have 3 dots (instead of 2 which is my expected behaviour).


Expected behaviour:
If i set 2 items per slide, with 3 images i Should only be able to click the arrow/scroll twice. Not 3 times.
2 items per slide on 4 images total should still give 2 "circles" & options to click the arrow, not 4 times ...and so on.
This behaviour only works properly when 1 item per slide is selected. upon selecting 2, 3, 4 or more, arrow keys can be selected the same amount as available image, not the total modulo itemsPerSlide which is the correct behaviour.

Example below: 3 images are uploaded, I have clicked the arrow once, but on arrow click I can still click once more.

Final click, doing nothing other than putting me in view 3/3.
This behaviour is the same on mobile and web.
We got this behaviour after upgrading our carousel from the deprecated one for the new one. I get the same behaviour when trying the component on a fresh application.


ETA on fixing this?

2022-11-12 11-28-30
Gonçalo Martins
Staff
Solution

Hello @Taha Salim Taha 

I managed to create a sample with your use case and the behaviour you describe is the same as the new library (Splide) works, not a bug. 
This new component is a new version and doesn't have a direct match with the deprecated version and this is important to be clear.

To have something closer to what you need you can explore the Splide documentation and I would suggest starting by looking into the "perMove" property that you can set using the extensibility client action on the initialize event of the carousel component:

Hope it helps!

Cheers,
GM

2022-11-12 11-28-30
Gonçalo Martins
Staff

Hello @Taha Salim Taha 

Thanks for reaching out.
Can you please share a sample oml that we can look into?
Regarding ETAs, this is a community forum, not a support channel so we'll try to help if it's an issue but without any hard commitments.

Cheers,
GM

2022-11-12 11-28-30
Gonçalo Martins
Staff
Solution

Hello @Taha Salim Taha 

I managed to create a sample with your use case and the behaviour you describe is the same as the new library (Splide) works, not a bug. 
This new component is a new version and doesn't have a direct match with the deprecated version and this is important to be clear.

To have something closer to what you need you can explore the Splide documentation and I would suggest starting by looking into the "perMove" property that you can set using the extensibility client action on the initialize event of the carousel component:

Hope it helps!

Cheers,
GM

2022-11-12 11-28-30
Gonçalo Martins
Staff


Hi @Taha Salim Taha 

Any update or feedback about this topic?

Cheers,
GM

2021-05-06 13-52-47
Taha Salim Taha

@Gonçalo Martins 

Thanks for the pointer toward the Splide Docs & perMove. I'll mark this issue as resolved.

However, I understand the other parameters to be behind custom settings, but this should really be exposed in the main component, alternatively automatically be set to equal the itemsPerSlide.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.