Hi there! I’m developing an app in ODC (OutSystems). I’m trying to display photos saved in an entity using a 3D carousel that rotates around the side surface of a cylinder with an elliptical base (an “elliptical rotation” style). I implemented it like the CSS shown in my attached note, but all the photos overlap. I want the photos to be evenly distributed across 360 degrees. How can I achieve this?could someone please suggest a solution?For reference, in the Container inside the ListItem (with the class "carousel-img-3d"), I added the following style:"--i:" + IntegerToText(GetPics.List.CurrentRowNumber - 1) + ";" +"--count:" + IntegerToText(Max(GetPics.List.Length, 1)) + ";" +"--radius: 500px;"
I expected this to offset the photos evenly according to the number of records saved in the entity, but… they still end up overlapping. Thanks in advance!
Hey @Maya Yoshioka,Your 3d Carousel is pretty much correct, although I have noticed small fixes. I am attaching the corrected version,
The overlap was happening because all items were rotating to the same angle. I fixed it by properly using the item index and total count in the transform.
Specifically, I now pass the total record count (--count) to the spinner, use a zero-based index (--i) per List Item, and calculate the rotation as rotateY(360deg / count * index) with translateZ(radius). I also centered items using top: 50% + translate(-50%, -50%) for stable 3D positioning.After this, the images spread evenly across 360° with no overlap.Important Note :- On List / Spinner Container (Class: carousel-spinner) "--count:" + IntegerToText(GetPics.List.Length) + ";"- On List Item (Class: carousel-img-3d) "--i:" + IntegerToText(GetIndex() - 1) + ";"
Hi @Sheikh Mohd Fahad , Thank you so much for your help and for taking the time to respond. My apologies for the delayed reply—I was away on holidays.
I tried applying the 3D Carousel (Fixed Version).txt you shared, along with adding the suggested styles to the Spinner Container and List Item. However, the images were not evenly arranged in a 360° circle. Additionally, when I added styles to each class, only the image with Index 1 from the entity data was displayed.
Regarding the issue of only one image being shown, I was able to resolve it by adding the following styles to the Container inside the ListItem as I wrote in my initial post:
- On List Item (Class: carousel-img-3d) "--i:" + IntegerToText(GetPics.List.CurrentRowNumber - 1) + ";" + "--count:" + IntegerToText(GetPics.List.Length) + ";"
You mentioned that after your changes, the images were evenly arranged in a 360° circle without overlapping. If there were any other adjustments you made to achieve that, could you kindly share them? I’d really appreciate your guidance.
Thank you again!
Hey, hope you had a great holiday 😊
Thanks for the clarification, that helps a lot. The remaining issue is mainly about where --count is defined.
In your workaround, setting both --i and --count on each List Item fixes the “only one image” problem, but it also causes the uneven layout because --count is recalculated per item.
What worked for me to get a clean 360° distribution was:
Set --count only once on the spinner / List container
"--count:" + IntegerToText(GetPics.List.Length) + ";"
Set only --i on each List Item (your use of CurrentRowNumber - 1 is correct 👍)
Center items using left: 50%, top: 50% and translate(-50%, -50%) instead of top/bottom/margin:auto
After moving --count back to the spinner and keeping it out of the List Item, the images were evenly spaced around 360° with no overlap.
Hope this clarifies it — happy to help further if needed!
Thank you for your response.I followed your advice carefully, but the images still aren’t evenly arranged in a 360° circle and ended up looking like the pic attached…
I’ll continue investigating what might be causing this issue in my app. Thank you for your support!
Hi @Maya Yoshioka, thanks for sharing the screenshot — this helps
What you’re seeing now usually happens when the spinner class is applied to the List itself (or per row) instead of a single wrapper container. In ODC, the List renders one row per record, so the 3D rotation breaks and everything collapses into a thin strip.
What may work for you: -Add one Container outside the List and apply carousel-spinner to that container -Keep the List inside it without any 3D styles -Apply carousel-img-3d only to the List Item container -Set: --count on the spinner container only --i on each List Item (your CurrentRowNumber - 1 is correct )
Once the spinner is a single wrapper (not repeated per row), the images spread evenly around 360° instead of stacking or clipping.
Hope this clarifies the missing piece!
Hi @Sheikh Mohd Fahad ,Thank you so much for your advice!
I tried the approach you suggested, but unfortunately I couldn’t get it to work in my environment. However, your solution is very helpful and I believe it will benefit others, so I’ll mark your comment as a solution.
I really appreciate your support!