5 ms·

Show HN: The Fastest Slider library for high performance websites

15 points by MNNTNK 4y ago

theseobosscom 4y ago
It’s buggy on iOS Safari
- MNNTNK 4y ago
  That's weird, It seems to be working fine on my iPhone. Can you let me know which version of Safari You are using?
MNNTNK 4y ago
I've been pretty disappointed with existing slider libraries because of their horrendous impact on the browser's main thread, and they also cause layout shifts which is a total pain in the neck to get rid off - They do not provide any way to fix the layout shifts in a idiomatic way. So, I decided to create a slider library that focuses purely on being as fast as possible but still pretty push fully featured and super customizable. The library I have created is 30x faster than slick, 15x faster than swiper - while still being 5x smaller than slick and 19x smaller than swiper in size. Despite being so small and fast - it still has lots of features and customizability. I've just released V1.0 - Do check it out
- axyz 4y ago
  You may need some sort of threshold to ignore scrolls that are mostly vertical. It's really hard to scroll the page on mobile as the slider prevents the default scroll unless the movement is perfectly vertical
  - MNNTNK 4y ago
    Yeah, This is not good. This is happening because I've set `touch-action: none` CSS. It should be `touch-action: pan-y` Edit: Fixed in V1.0.1
Komodai 4y ago
absolutely hate the fact that it snaps then you have to wait until you can slide.
- MNNTNK 4y ago
  Thanks for the feedback, I see your point. This is definitely annoying, This is happening because I've added a logic that does not let the user trigger another transition if the slider is in mid-transition state. Though I think a better approach would be to allow the user to trigger another transition and handle it gracefully. Working on it to fix this.
- MNNTNK 4y ago
  Fixed in V1.0.2 ;)
anitil 4y ago
How I wish I had this a couple of weeks ago! I was doing a sliding image gallery and this would have been so much nicer than the terrible mess I put together.
ibdf 4y ago
FYI: I ran into some caching issue on safari where the js chunck would not load. Forcing a refresh (even though I never been to this site before) worked. Speed is great, but how do the features compare to the other libraries mentioned?
- MNNTNK 4y ago
  It's got all the basic stuff you need that comes with other sliders, * touch support, drag, swipe * custom config for different media devices * ability to customize a lot of stuff -> see https://blaze-slider.dev/docs/category/api https://blaze-slider.dev/docs/category/api Now here's what it CAN't do: * NO "fancy" effects like https://triple-slider.uiinitiative.com/ https://triple-slider.uiinitiative.com/ * NO "Full" RTL support as of V1.0 (it works, but just like LTR) * NO "Virtual Slides" I may end up adding this features in V2, but not at the cost of performance. If it slows down the library - I won't do it.
ttymck 4y ago
Looks and works great. I was a bit surprised, though. I expected a range slider[0]. I usually see "blaze slider" widgets called "carousels"[1]. Is this a regional thing? [0]https://www.w3schools.com/howto/howto_js_rangeslider.asp https://www.w3schools.com/howto/howto_js_rangeslider.asp [1]https://www.w3schools.com/howto/howto_js_slideshow.asp https://www.w3schools.com/howto/howto_js_slideshow.asp
- MNNTNK 4y ago
  Yeah, the terminology is a bit loose here, A better name would be "carousel", but "slider" seems to be more popular term for "carousel" nowadays. See https://www.npmjs.com/search?q=slider https://www.npmjs.com/search?q=slider

15 points by MNNTNK 4y ago

theseobosscom 4y ago

It’s buggy on iOS Safari

MNNTNK 4y ago
That's weird, It seems to be working fine on my iPhone. Can you let me know which version of Safari You are using?

MNNTNK 4y ago

I've been pretty disappointed with existing slider libraries because of their horrendous impact on the browser's main thread, and they also cause layout shifts which is a total pain in the neck to get rid off - They do not provide any way to fix the layout shifts in a idiomatic way. So, I decided to create a slider library that focuses purely on being as fast as possible but still pretty push fully featured and super customizable. The library I have created is 30x faster than slick, 15x faster than swiper - while still being 5x smaller than slick and 19x smaller than swiper in size. Despite being so small and fast - it still has lots of features and customizability. I've just released V1.0 - Do check it out

axyz 4y ago
You may need some sort of threshold to ignore scrolls that are mostly vertical. It's really hard to scroll the page on mobile as the slider prevents the default scroll unless the movement is perfectly vertical
- MNNTNK 4y ago
  Yeah, This is not good. This is happening because I've set `touch-action: none` CSS. It should be `touch-action: pan-y` Edit: Fixed in V1.0.1

Komodai 4y ago

absolutely hate the fact that it snaps then you have to wait until you can slide.

MNNTNK 4y ago
Thanks for the feedback, I see your point. This is definitely annoying, This is happening because I've added a logic that does not let the user trigger another transition if the slider is in mid-transition state. Though I think a better approach would be to allow the user to trigger another transition and handle it gracefully. Working on it to fix this.
MNNTNK 4y ago
Fixed in V1.0.2 ;)

anitil 4y ago

How I wish I had this a couple of weeks ago! I was doing a sliding image gallery and this would have been so much nicer than the terrible mess I put together.

ibdf 4y ago

FYI: I ran into some caching issue on safari where the js chunck would not load. Forcing a refresh (even though I never been to this site before) worked. Speed is great, but how do the features compare to the other libraries mentioned?

MNNTNK 4y ago
It's got all the basic stuff you need that comes with other sliders, * touch support, drag, swipe * custom config for different media devices * ability to customize a lot of stuff -> see https://blaze-slider.dev/docs/category/api https://blaze-slider.dev/docs/category/api Now here's what it CAN't do: * NO "fancy" effects like https://triple-slider.uiinitiative.com/ https://triple-slider.uiinitiative.com/ * NO "Full" RTL support as of V1.0 (it works, but just like LTR) * NO "Virtual Slides" I may end up adding this features in V2, but not at the cost of performance. If it slows down the library - I won't do it.

ttymck 4y ago

Looks and works great. I was a bit surprised, though. I expected a range slider[0]. I usually see "blaze slider" widgets called "carousels"[1]. Is this a regional thing? [0]https://www.w3schools.com/howto/howto_js_rangeslider.asp https://www.w3schools.com/howto/howto_js_rangeslider.asp [1]https://www.w3schools.com/howto/howto_js_slideshow.asp https://www.w3schools.com/howto/howto_js_slideshow.asp

MNNTNK 4y ago
Yeah, the terminology is a bit loose here, A better name would be "carousel", but "slider" seems to be more popular term for "carousel" nowadays. See https://www.npmjs.com/search?q=slider https://www.npmjs.com/search?q=slider