Page 1 of 1
Positioning objects in carousel
Posted: Mon Feb 12, 2024 6:51 pm
by Bucky108
I have a carousel with type set to full width and floating,
If I add an object to a carousel panel, for example an icon, and position it to the left edge of the carousel, in design mode it looks like the icon is positioned right at the edge. However, in preview the icon is not on the left edge, but instead is indented to the right, as if there was a margin or padding.
In breakpoints though, the icon moves closer and closer to the left edge.
Is there a way to force objects to the left edge in the default breakpoint?
Re: Positioning objects in carousel
Posted: Mon Feb 12, 2024 7:09 pm
by Pablo
This is normal behavior. For a floating Carousel (Bootstrap) the offsets are in percentage, not pixels. This makes it mobile friendly.
Re: Positioning objects in carousel
Posted: Mon Feb 12, 2024 7:28 pm
by Bucky108
OK but why wouldn't the offset be 0 percent?
Re: Positioning objects in carousel
Posted: Mon Feb 12, 2024 8:36 pm
by Pablo
When you set the offset to 0 then it should be 0.
Note however that the icon glyph may have a margin of its own.
If you need further assistance then please provide a DEMO project so I can see what you are doing.
Re: Positioning objects in carousel
Posted: Mon Feb 12, 2024 8:59 pm
by Bucky108
Re: Positioning objects in carousel
Posted: Mon Feb 12, 2024 11:54 pm
by crispy68
The reason why that happens is the Carousel is full width but the 'slides' within are only as wide as the breakpoints you choose.
So in the default view, your page is 1009px wide which makes the slide itself 1009px. This slide is centered in the page. You can see this from the browser inspector below:
All the elements you add only appear in that 1009px space rectangle. As you can see, the icon is far left at zero.
Same thing happens when it hits the 600px breakpoint, the slide is now 600px wide.
You may want to set the carousel to flexible for what you want.
Re: Positioning objects in carousel
Posted: Tue Feb 13, 2024 6:18 pm
by Bucky108
Thanks Crispy that's insightful. I don't want to use a flexible carousel because I want to have absolute positioning of objects.
My attention was to control the slides through an arrow image or icon using an event to move the slides.
I tried setting "pause cycling on mouse enter"; the problem with that though is when you hover over the arrow it immediately starts the cycling and if you press an arrow, it's cycles too quickly.
If anyone has any crazy hack ideas I'm open to any suggestion.