Hey guys,
I have a carousel that shows 5 items on a page and when the carousel loads.
I need to seet a specific item as the active item on the carousel when it loads. If the item is not specified it should be the item on the center that will be set as active.
I know splidejs has a Focus option but haven't been able to apply it in OutSystems.
Is there a way to do it?
Thanks in advance.
Hi Mario,
Please go through this Link. Hope this helps.
Thanks
Prince
Thanks for your reply.
The Starting Position only solves part of the issue.
I need the active Item to always show in the center and not to the left.
Any way to do so? Can't find it on the documentation
Hello @Mario Andrade
There is a property in optional configuration of a Carousel on which you can set a Active index of a Carousel Item
Just add a Local variable add a default value or you can assign a value on a OnInitiliaze action
And when the page is loaded it will show you the active item.
I am attaching a sample for you I hope it helps
https://personal-ejuytnht.outsystemscloud.com/OutsystemsCarousel/SampleCarousel2
Best RegardsTousif Khan
Hi @Tousif Khan thanks for that, I've been using that property but forgot to mention it on my post. The item needs to show in the center.
Using the StartingPosition parameter I can set it to start at the 3rd item but I need the active item to show in the center (where item 5 is in the image).
How can I do this?
Hey guys, I think I found the correct solution.
OutSystems UI Carousel is based on SplideJS and SplideJS has the Focus option, which is available in SplideJS v4, same version it is used by OutSystems but the option is not included in OutSystems Carousel.
I created a custom structure based on the OutSystemsUI SplideConfigs structure to add the Focus option to it while keeping all the existing options:
After creating the custom structure I replicated the SetSplideConfigs client action to set the provider settings to consume the structure I created
On the Carousel Initialize action I call my CustomSetSplideConfigs option and pass the index of the item I want to show centered:
On the SplideJS documentation mentions the focus parameter accepts a 'center' value but for some reason it was not working when I tried it.