Hi Team,
I would love it if the options 'focus' and 'drag' were added to the SplideConfigs structure of the Carousel so that I could set them. It would make the carousel much more aesthetically pleasing in my opinion.
Thank you in advance!
Cheers,
Orçun Yilmaz
Hello @Orçun Yılmaz
First of all, thank you for your feedback.As we announced when we released these features will be added iteratively and according to priorities and we'll add all options we can as soon as we'll be adapting the code to support that (probably we'll have a new iteration in Q1 2023).Meanwhile, you can use our javascript API to achieve that.
Cheers,GM
Hey Gonçalo,
Ah, I haven't looked far enough to find that announcement. Thanks for the swift reply!
Looking forward to the see the options available in a next update.
Looking at SlideJs documentation I can see on the current version that on the JavaScript we can set the focus property like so:
new Splide( '.splide', {
focus : 'center',
} );
link: https://splidejs.com/guides/options/#focus
The current version of the client action SetSplideConfigs that comes with OutSystemsUI does not include the focus property and some other properties already available on the SlideJs options page.
I tried to use the JavaScript API like so:
OutSystems.OSUI.Patterns.CarouselAPI.ChangeProperty(Carousel.Id, "focus", "center")
but kept getting an error:
{"code":"OSUI-API-06001","isSuccess":false,"message":"changeProperty - Property 'focus' can't be changed."}`
The best option at this point is to replicate the SetSpliderConfigs client action from OutSystemsUI to your own environment. (for this example i'll call it CustomSetSpliderConfigs)
Also replicate the SplideConfigs structure from OutSystemsUI to your environment and add the properties you need. (i'll call is Str_CustomSplideConfigs)
Adapt the CustomSetSpliderConfigs to use the Str_CustomSplideConfigs structure where you added the options you need.
Now just create an Initialize action on the Carousel and call the CustomSetSpliderConfigs you created and set the value for the options you want. This should do the trick.
And make sure the property names are written correctly because it's case sensitive.
I change some of the options in ODC [OutSystems UI] Carousel using the follow approach. Thank you Mario Andrade for the inspiration.Using the onInitialize event on the carousel I change the property writing a Javascript with the follow instruction.
OutSystems.OSUI.Patterns.CarouselAPI.SetProviderConfigs($parameters.CarouselId,{updateOnMove: true});
I supose you can use it for the options you need.