Slick: Smooth-out Resize

[AJB99]

Hey Ken,

Thanks a tonne for Slick.js, it's an excellent slider.

I've got an issue with resize when using multiple sliders (horizontal within vertical, etc.). You can see what I mean by visiting this site: http://2015.tendril.ca

Go to the Work section and then do a bit of resizing (diagonally) and you can see that the other slides show though around the edges.

I've managed to get it so that it snaps back into position once the resize is done, but is there any way I can smooth out the initial resizing so that the other slides don't show through?

I've tried removing the 50ms timeout you've set in the source, but that didn't really help.

Any advice would be much appreciated.

Thanks.

[simeydotme]

Hi @AJB99 ... please read:
https://github.com/kenwheeler/slick/blob/master/CONTRIBUTING.markdown

[AJB99]

Hi Simeydotme,

Don't be a victim of your own policies. It's not reasonable to reproduce the entire site linked in my original post as a fiddle.

And given that the issue is only apparent when implementing multiple sliders (sliders within sliders) that are full of content, then the most reasonable way to demonstrate the issue is to provide a link to the site I'm working on, as I've done above.

I can understand why you have the policies in place, but can you honestly tell me a better way to illustrate this problem than what I've built/provided?

If the problem cannot be recreated using the bare minimum HTML/CSS/JS then how could I possibly illustrate it to you other than a link to the site I'm building?

[simeydotme]

Hi @AJB99 apologies I closed accidentally, but regardless; you probably wont get any help without the reduced test case and a clear description of the problem.... and... perhaps why you think it's a bug with Slick and not a result of your own implementation :smile:

And given that the issue is only apparent when implementing multiple sliders (sliders within sliders) that are full of content, then the most reasonable way to demonstrate the issue is to provide a link to the site I'm working on, as I've done above.

^^^ Not true, the most reasonable way is to use the JSFiddle template provided and modify it just enough to demonstrate your issue.

I can understand why you have the policies in place, but can you honestly tell me a better way to illustrate this problem than what I've built/provided?

^^^ The best way to illustrate a issue/bug/enhancement for Slick is by using a bare-minimum JSFiddle which is provided in the contributing.md and building upon it just enough to show your point.

If the problem cannot be recreated using the bare minimum HTML/CSS/JS then how could I possibly illustrate it to you other than a link to the site I'm building?

^^^ If it cannot be recreated without creating your whole website, then it is probably not a problem with slick :bow:

Best, Simon :)

[AJB99]

Hi Simon,

It's a problem with Slick. The problem is that the resizing technique that's been implemented in Slick lags behind the resize of the browser window and the slides (in slick) don't reposition themselves quick enough to smooth out the resize.

I'm not interested in debating you about how to post issues. If you don't want to look at the link then don't.

Last slider I'll ever need my ass.

[simeydotme]

Thanks @AJB99 ... I'm sorry you don't wish to follow the practise for contributing and improving Slick, or debate said practise :confused:

Not following the contribution guidelines will unlikely get you the result you desire (a feature improvement in the plugin); so perhaps instead you could take a read of: https://medium.com/@stephenkeable/do-users-resize-their-browser-windows-or-is-it-just-developers-and-designers-e1635cbae1e1 -- I doubt your problem exists in the real world, anyway :smile:

Regards, Simon.

[kenwheeler]

Just catching up here, so the issue here is that when resizing the browser window, the recalc of dimensions isn't fast enough?

There isn't much that can be done about that. There is a ton of calculation and dom mutation that takes place in order to allow for resizing. It's throttled because that's kind of heavy to fire in real time while resizing.

99.99% of the time, nobody is resizing their window, they are just landing at a certain width and slick does the rest. In the event that clients aggressively resize, what I like to call jerking off the window, I think a bit of lag while the styles and positions recalculate is unavoidable.

Of course, if you know of a way to have this not happen, I would graciously accept a pull request :)

[AJB99]

Hey Ken,

Thanks for replying. I figured as much. There is a _tonne_ of recalculation happening for me since I'm running 4 sliders in the same page, but I figured it was worth it to ask and see if you had any suggestions.

I'll use Tendril.ca as a test case and see what I can come up with. I'm really not expecting that I'll be able to smooth it out entirely, but I'll play with the throttling and see what I can do. If I get any good results I'll send through a pull request.

Thanks again.

[marcc1213]

Just responding since i ran across this myself. Frankly, I don't mind the issue - the only people who even notice are those resizing the screen like maniacs as part of testing. But, since my client is one of those people...

I removed the throttling and the if ($(window).width() !== _.windowWidth) test. In my working version, this is the resize function:

Slick.prototype.resize = function() {
var _ = this;
_.windowWidth = $(window).width();
_.checkResponsive();
if( !_.unslicked ) { _.setPosition(); }
};

It works fine and I've seen no issues so far.

[nominalaeon]

I encountered this same issue and, in addition to using debounce, there are event handlers I use to set the slick-frame's visibility to hidden-then-visible when ugly resizing occurs. Adding this to the plug-in would add unnecessary bulk as there are so many use cases to consider. It's better handled by the implementer with the resize event

[Cam]

I've found this bug too. It happens in almost all implementations. It's most definitely what I would call a bug, but in an otherwise awesome plugin :D

[Cam]

@marcc1213 Your solution works perfectly for me too. Thanks!

[benkenny]

I arrived at this issue too. The slider looked a bit wonky upon window resizing, which, even when done slowly, revealed a portion of the next slide before snapping back and hiding the slide again. Another +1 for the solution provided by @marcc1213 Cheers!

[parhs]

This happens with most sliders out there and its annoying. I dont know why but probably there is a reason. I think adding an option for this delay would be nice, like owlcarousel does. Glide.js is cool but works only on ie10+