Image Carousel glitches inside Modal Box

I am facing an issue with using an Elementor Image Carousel inside a Sina Modal Box. The Image Carousel is added to the Modal Box from within a Template containing only the Image Carousel.

What works:

• Modal Box correctly displays Image Carousel’s image wrapper.
• Modal Box correctly displays the navigation arrows on the left and right.
• Modal Box has the correct dimensions and decorations.
• Slides inside the Image Carousel can be moved by swiping.

Unexpected behaviors:

• Image Carousel does not autoplay.
• Clicking the Image Carousel’s navigation arrows has no effect (should be scrolling)
• Image Carousel’s navigation progess dots don’t show at bottom of the page.
• Image Carousel displays last image slide first instead of first slide.

Other observations:

• When added directly to a page as a section instead of loading it inside a Modal Box, Image Carousel displays and behaves correctly.
• Oddly, when opening developer mode / inspect tool in browser, Image Carousel gets resized and starts behaving as intended inside the Modal Box.
• Behavior can be reproduced across browsers.

Possibly the Modal Box fails to load the Image Carousel’s scripts upon open, but then loads them upon the Modal Box getting refreshed due to a resizing event caused by the browser’s inspect tool? Only speculating here.

• This topic was modified 2 years, 7 months ago by naeal.