search

erik-krogh / SudoSlider

The most versatile jQuery content slider
36 stars 24 forks source link

autoHeight issue #65

Closed jacklinwood closed 5 years ago

jacklinwood commented 5 years ago

Hi mate,

I have a slider with autoHeight left as true. I then have a slider inside one of those slides. This seems to work okay apart from the autoHeight not working on the one inside. I have longer content in the second slide but that is cut off to the same height as the first slide until I change the browser viewport, then the rest of the content is shown.

Any ideas?

Thanks,

Jack

webbiesdk commented 5 years ago

You are encountering the limits of autoheight: That it only changes the height when going from one slide to the next (or adjusting the size of the viewport).

You could simply run $(window).trigger("resize") whenever the inner slide has re-adjusted to re-adjust the outer slider, but this would simply "snap" the slide to the right height without a smooth animation.

If you use the recent performanceMode option, you can get somewhat close to the behaviour you intend (demo: http://webbies.dk/tmp/nested/demos/nested.html), but this solution is far from perfect.

I don't think there is a general solution to your problem, I think you'll have to write your own code in the callbacks of the inner slide, and in those callbacks change the height of the outer slider (set the option useCSS: false on the outer slide if you do this).

webbiesdk commented 5 years ago

I got an idea how to do it.

Setting the option performanceMode: 1 on the outer slider makes sure it such that the only the visible slide is actually shown in the DOM, meaning that autoheight doesn't have to be on while the outer slider is not animating. If you then add some callbacks to the inner slider, that makes sure to disable autoheight when the inner slider is animating, then everything works.

I updated the previous example to show it. Just look at the source code: http://webbies.dk/tmp/nested/demos/nested.html

The animations will behave weirdly if you try and animate the outer slider while the inner slide is animating. But it will just snap in place, the page won't break.

jacklinwood commented 5 years ago

That's brilliant, problem solved! Thank you for your help and quick turnaround.

webbiesdk commented 5 years ago

Glad I could help.

You guys seem to use SudoSlider a lot in the websites you make. I like that.