Ways to load Post Carousel after page load (e.g. reinitializing or refreshing or resizing)

Developers
1

I am using the Carousel within a column that is initially hidden and only displayed after it is triggered through a button click. To do this, I use display: none; and switch then to display: block;

Apparently this keeps the Carousel from loading at page load, and I couldn’t find a way to load it with the button click.

Are there any ways to trigger the loading of the carousel through javascript (or css, though unlikely)? Are there any methods for reinitializing or refreshing modules like the post carousel?

Alternatively, is there any way to trigger a resize event? When I resize the browser manually, it displays, so basically resizing seems to solve the problem. However, I tried to trigger a resize event with the button click and that doesn’t work.

2

Whatever code you are using to change the display to block add a trigger event there

3

Thank you for the reply.
What kind of trigger event works? To 1) resize or to 2) refresh/reinitialize the post-carousel or 3) anything else?
if it’s 2) how can I control the carousel through javascript?
if it’s 1), I used window.dispatchEvent(new Event(‘resize’)); with a timeout, but it didn’t work.

(sidenote: alternatively I could also use the post-slider if that is easier to target through javascript)

4

If resizing the browser works then you just need to trigger the resize event after the button has been clicked with
jQuery(window).trigger('resize');

5

That is not working for some reason. It only works when I manually resize the browser.

Is there a way to target the post-carousel directly through javascript to trigger a refresh or similar?

6

if it isnt working then you are not triggering it at the right time. That line of code does exactly the same as resizing your browser