I am writing to report a recurring issue encountered with JavaScript-dependent components within the Query Loop element when using the infinite scroll feature. Components that rely on JavaScript initialization (like sliders and Lottie animations) work correctly upon initial page load but fail to initialize for content dynamically loaded via infinite scroll.
- Initial Load Behavior:
- Upon initial page load, all JavaScript components initialize as expected.
- Components such as Lottie animations set to trigger on viewport visibility work correctly because they utilize a scroll observer to detect their visibility.
- Behavior After Infinite Scrolling:
- When new content is loaded dynamically through infinite scrolling, JavaScript components do not reinitialize.
- This issue is specifically noticeable with:
- Lottie Animations: Triggered by actions other than viewport visibility (like click or hover).
- Sliders: These fail to function entirely after being loaded via infinite scroll.
Expected Behavior:
After new content is loaded through infinite scroll, all JavaScript components within that content should initialize and function identically to how they do on initial page load.
Possible Solutions :
I am looking for a way to re-trigger or reinitialize these JavaScript components upon the loading of new content through infinite scroll. If there is an existing hook or an event trigger that can be used to achieve this, please advise on how to implement it. Alternatively, if this can be addressed in an upcoming update, it would significantly enhance functionality.
Hi @hardik777 ,
Thanks for checking with us.
This is not a bug in Bricks, it’s just your custom JavaScript didn’t listen to the infinite scroll event.
Kindly report to us if there is any native element in Bricks that doesn’t reinit after Infinite Scroll.
Please check this documentation and choose the JS event suite for your case.
Regards,
Jenn
1 Like
Hi @itchycode
Thanks to your previous guidance, the reinitialization issue with our infinite scroll has been resolved successfully. However, we have come across another challenge involving Swiper JS. When Swiper is initialized inside content that has been dynamically loaded through infinite scroll, we notice that the synchronization between the pagination bullets and navigation arrows breaks down. Specifically, when navigating slides using the arrows, the active state of the pagination bullets does not update accordingly. Additionally, Swiper does not seem to support other pagination types like fractions or progress bars when used in this context.
Here are the key details:
- Issue: Swiper pagination (bullets) not syncing with slide changes via arrows in an infinite scroll context.
- Expected Behavior: Pagination should accurately reflect the current slide, and support for fractions and progress bars should be operational.
- Current Setup: Swiper is reinitialized after each content load via infinite scroll.
Could you please provide guidance or potential solutions to ensure that Swiper functions correctly with all features intact when used with infinite scroll? Any tips on adjusting Swiper’s initialization or configurations to better handle dynamic content would be greatly appreciated.
Thank you for your attention to this matter. I look forward to your expert advice.