I'm creating an ACF Block which contains a carousel and need to re-initialise the carousel when the user edits the information and returns to the page preview. I currently have:
// Block includes
import { initUserGroupCarousel } from './blocks/user-group-carousel.js';
initUserGroupCarousel();
And
export function initUserGroupCarousel() {
if (window.acf) {
window.acf.addAction(
'render_block_preview/type=user-group-carousel',
userGroupCarousel
);
}
}
export function userGroupCarousel() {
// Initialise the carousel here...
// Runs once on page load but not subsequent previews
}
This successfully triggers the carousel init on page load, but if the content is edited and I return to the preview mode the carousel fails to initialise and the content is displayed in it's entirety.
Looking through the docs this seems to be the correct approach. Does anyone have any suggestions?
Thanks in advance
UPDATE 1
Interestingly, the re-initialising triggers if content is amended within the block. If I simply click into the block and back out again without making any changes the carousel is lost.