Ken Burn Effect 2022 || bugged interactions

Helo community,

I try to reproduce a ken burn effect following this clonable project or this one. I’ve also looked in available posts on this forum, but most of theses topics are closed / link doesn’t work. Here, here, here

My issue is that the loop between slides get easily interrupted and I can’t figure out why. It seems inconsistent… sometimes it stops, sometimes it didn’t.

I’m suspecting too many things going on the page… I do have hover interactions on arrows of the slider, and on the navbar hamburger menu.

I’m looking for other alternatives, any javascript (I’m not use to do it myself, but I know how to use ctrl+C :wink: ) or others ways to fix this!

HERE Link to my website page

Any ideas ?!

Regards,
Charles C.

hi @ACarchitecture all looks good on my side and slider is working as expected. I thing that you maybe referring that slider stops on mouse hover but this is its basic behaviour. You can go around it but you may loose manual slide swap and I will not recommend it anyway. But if you would like to have this type of solution this topic is covered on this forum in several requests, just type “slider hover stop” in forum search input filed and find solution that will serve you best. :slight_smile:

1 Like

Hi stan,

Thanks you for taking the time to answer me! So you confirm that’s what I was thinking…

As I really want to be able to manually swap between slide AND keep the ken burn effect animation, is there any way I can do it with html or any javascript ? My research isn’t really effective about that topic…

Regards,
-CC

hi @ACarchitecture you still have this effect on click. Or I’m missing something?

@Stan, yes indeed, but I need the animation constantly flowing. As soon as I hover an interaction button the animation stop :confused:

Hi @ACarchitecture I have already mentioned than you can have one or other.

when you apply pointer-events: none slider will continue changing slides but you will lose functionality for arrows and dots . If you set on these elements pointer-events: auto slider will stops anyway when you will hover over these.

One way how to get it work is to not use WF slider as it has very basic functionality, that’s totally fine for simple sliders and it will be useful in many cases. But it is useless when you need something more than moving large rectangles back and forth. You can try hacking WF slider but it is PIN and you will do better of using some library that offer more functionality and is pleasure to work with.

I can recommend Glide

you can see in examples that slider doesn’t stop on hover

but there are many other great libraries as

and many other slider/carousel libraries. Just find one that will fullfill your needs.