I am trying to create a custom slider using Splide on my website https://slider-e65739.webflow.io/. I have added custom code to achieve this.
However, I cannot see the fourth and fifth images until the mouse moves/scrolls. I don’t want the gaps to be seen after the 5th image until the slider reaches the first slide. I want it all to be moving in a continuous motion without a gap.
If you also hover in the blank area after 5th image, you can already see the hyperlinks but not the image.
Can anybody help me understand the issue and provide a possible solution for this?
The issue likely stems from improper slider initialization, image rendering delays, or CSS conflicts. Ensure the slider is set to loop, all images are fully loaded before initialization, and check for CSS rules causing gaps or visibility issues. Use consistent dimensions and spacing for slides, verify proper duplication for looping, and eliminate any unintended margins or paddings. Debug with browser tools to identify and resolve DOM or style inconsistencies for seamless, gapless slider motion. if you further face issues would be happy to connect and help.