Streaming live at 10am (PST)

How to make a slider height to auto adjust per content height?


#1

Currently, slider heights cannot auto adjust based on the height of the content within them. I super duper need this feature…does anyone have simple code that a non-developer (like me) can paste to make this happen? I need it to work with CMS pages.

TY!


#2

Hi CynicalKiddo,

A slider can fit to the content. However, the slider will be as tall as the tallest slide it contains. Slides and Mask expand naturally, but you need to alter the Slider element for this to work.... and know about a little trick: sometimes in Webflow, a default value (a grayed one) doesn't really work, you have to type it in.

So select the Slider element, give it a class, and in the Height field, where Auto is written in gray and is supposed to be the default, type "auto" in and Enter.

(outch this gif is funky, have a look to the mp4: http://vincent.polenordstudio.fr/snap/ipp5l.mp4 )


#3

Thank you for this, but it's not the solution I need. I cannot have all slide heights be the same as the tallest slide in the bunch. They will create terrible empty space issues and long scrolls.

Thank you!


#4

Hmmm, I don't know what your context is but maybe you can try a different thing. In the slider there is a MASK element. that mask, well, masks anything that falls outside slides. If you give a class to this element and then remove the overflow:hidden property it has by default, tall content will show up.

How does it work, if you have slides of different heights, when you view them? the content underneath is supposed to go up and down depending on their height?


#5

Yes! That's exactly what I need! A very adaptive slider, if you will.

Here are my links (so much to be done!). Click on any portfolio block and you'll see where I've implemented the sliders:
Read-only: https://preview.webflow.com/preview/cynple?preview=9c54bc7f62bb3ad4fc8225cfec5926c2
IO: http://cynple.webflow.io/


#6

Anyone have code to make this work?


#7

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.