Looped splide slider hover animation issue

Hello everyone :wave:,

I am experementing for a while now with webflow and tryed to figure out how to do a slider like in this example from: awwwards.com.

To do this I usesd a tutorial from Timothy Ricks - Carousel slider tutorial on youtube and the Splide slider: Splide

I came pretty far and was able to recreate the slider, everything worked out fine and I tried to ad a hover function to it. Then I noticed that wen the loop starts over again, the first slide isn´t showing his hover animation until it´s position is exact at the starting point of the slider like before. As you might probably already understood I wan´t it to function like in the example link and it bothers me to can´t get it right and figure out what to do or change.

I would be grateful for any of your help.
Thank you

Christine


I have made a litte youtube screenrecord

No ideas what I could do? :pleading_face:

Sorry, I deleted the read only link. I only got the “Lite Plan” with max 10 projects.
10 projects are a little less and a huge gap between the “Pro Plan” with unlimided projects and the “Lite Plan” in my opinion.

I don’t exactly sure about it since I haven’t used Splide before and I don’t have your site link.
But normally, the Slider library will prepend and append a few cloned slides to make a loop look seamless.
Those cloned slides will not have an animation from Webflow IX2.

If the classes of the cloned slides are not changed and only have some additional classes.
Maybe re-init the Webflow IX2 might work.

Webflow.require('ix2').init()

Just try to paste this code into the browser console.
If it works then find a way to run this code after the Splide.

1 Like

@Smith.S Yes it works :partying_face: :raised_hands:
Thank you so much for your help :pray:

But I still don´t have a clou way and how?

1). browser create Html
2). Webflow IX2 adds eventListener to all elements that have interaction.
3). Splide create additional Html (To make a looping possible)

Element from (3) didn’t have eventListener from Webflow since it creates later.
To solve that we tell Webflow IX2 to add eventListener one more time with the code I gave you.

1 Like

@Smith.S Thank you :slight_smile: :+1:

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.