Passive event listeners

[simplenotezy]

As per web.dev:

"Touch and wheel event listeners are useful for tracking user interactions and creating custom scrolling experiences, but they can also delay page scrolling. Currently, browsers can't know if an event listener will prevent scrolling, so they always wait for the listener to finish executing before scrolling the page. Passive event listeners solve this problem by letting you indicate that an event listener will never prevent scrolling." https://web.dev/uses-passive-event-listeners/?utm_source=lighthouse&utm_medium=devtools

We could get a better performance, if the event listeners had: {passive:true}

[doughballs]

Any update on this @pawelgrzybek? Nearly two years since the request.

[panoply]

Until Pawel gets time as I believe his intention was to overhaul the project you guys can use this: https://gist.github.com/panoply/2ac2e49d118d94fae9a1b1889e992a43 which is TypeScript version that applies passives and various other bug fixes etc which is related to #219. I would fork and maintain but I am too busy.

There is also tiny swiper which is not as elegant as Siema (imo) but applies similar logic.

[doughballs]

Thanks for the response @panoply. I was excited about Siema becoming my new lighter go-to (having been a long time devotee of Slick) but today found two pretty sizeable issues that make it unusable for me going forwards.

[erolabzait]

https://splidejs.com/ is also a good alternative

[panoply]

In terms of Siema and modern JS it holds up pretty well. We use it in production and extend upon it with zero issues across multiple devices. Adjusting it to work with your current environment be that a virtual dom or SSR is relatively simple and configuring it behave a certain way is merely a matter of CSS and coupling that with onInit hook.

In the land of JavaScript it always important to note that well written code does not really expire so unless the issue is breaking you should be good to go. The gist I shared should suffice for many use cases. If you need a distributed JS version you can run it through a ts compiler and then a terser/minify compiler.

[doughballs]

In terms of Siema and modern JS it holds up pretty well. We use it in production and extend upon it with zero issues across multiple devices. Adjusting it to work with your current environment be that a virtual dom or SSR is relatively simple and configuring it behave a certain way is merely a matter of CSS and coupling that with onInit hook.

In the land of JavaScript it always important to note that well written code does not really expire so unless the issue is breaking you should be good to go. The gist I shared should suffice for many use cases. If you need a distributed JS version you can run it through a ts compiler and then a terser/minify compiler.

The passive error in Chrome is one thing, but also the navigation buttons (dots) disappear on resize, which is bizarre. I could look into a fix, but I could also just use Slick where this doesn't happen. Disappointing to find these two issues in one day.

[simplenotezy]

In the end I went with Embla - extremly lightweight and very pleasent API https://www.embla-carousel.com/