954
Views
4
Comments
Carousel Customization
Question

Hello Community,

Actually I'm facing a dificult about customizing the carousel widget. I need to make an horizontal slider menu with all months of the year, but only with 5 elements showing and with a free scroll. Then when I scroll, it has to change for the next option automatically and center.

Every time I swipe it scrolls a specific width each time. Somebody can help me with that?? 

2024-05-03 14-03-28
Sudip Dey

Please check the link this will help you to get rid of the issues. 

https://www.outsystems.com/forums/discussion/53992/change-carousel-dinamically/

Waiting for your comments,

Thank you,

Sudip

UserImage.jpg
Francisco Lains

Thank you so much for the fast reply, but it didn't solve my problem. The issue i'm facing is that I have a list of months that the user should be able to drag freely through it, and when it stops automaticaly select the option that is in the center of the 5 items.

I attatched a print that shows my carousel, but in this moment I have to drag one by one to get the January month (for example), I already changed the widget action called "gesture end" where I can simulate something like that (but with too many conditions), I supose there's an easy way to do that...

I'm really needy for help, this is delaying my project too much. 

Thank you for all your attention.

Months.png
UserImage.jpg
Francisco Lains

I found a good example on Outsystems UI Style guide:

https://outsystemsui.outsystems.com/OutSystemsUILiveStyleGuide/Carousel.aspx


In the last section that says "ITEMS - Specify the number of items to be displayed at the same time per device", that's what I really need. But when I define it with 3 or 5 items, the carousel only scrolls throught 3 or 5 items each time. But on the outsystems style guide example I'm able to drag freely, and then when I stop it centers the visible one... Is exactly what I need, but can't reproduce it. 


Thank you once again

UserImage.jpg
Francisco Lains

Hello once again.

Still there's nobody that can help me on this? I've noticed that the example I sent before only works on Web Application, in a Mobile Application the carousel works diferently. 


Still needing a carousel with 3 or 5 options clickable option, and when I drag it the carousel selects and center the option in the middle of the div. 

Is There somebody to help me on that?

Thank you.

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