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.
I’d love to launch my site, but this is holding me back. Help greatly appreciated. Thanks!
I’d really appreciate some help with this.
https://preview.webflow.com/preview/cynple?preview=9c54bc7f62bb3ad4fc8225cfec5926c2
Thanks for taking a peek!
@anon55398716 My pleasure!
I’m assuming you mean the project slider at the works template here.
I see that you have set the height to 200vw remove that and it to auto so it can grow/shrink depending on the content it contains.
Now the problem you have is that one of the slide’s has content that is a lot longer in comparison to the other slides making the slider looking stretched out when a slide with less content comes in.
Maybe you could solve this by using interactions, set it’s initial view to display: none and when it slides in back to display: block?
Yes! You assume right.
And, that is the problem: when set to “auto,” the height becomes as tall as the tallest graphic, leaving tons of empty space for the graphics that are shorter. I’d like it to automatically resize per each graphics individual height.
I haven’t worked in Webflow in months. This is where I left off before getting swamped with client work, so I’ve got to “re-grease my wheels a bit.”
I’ll try out what you suggested! Thanks a bunch.
Hmmm…after playing a bit, I’m not sure that I’m setting the interactions correctly. I tried setting an interaction to start at “Display:none” and to be triggered by the slideshow. I tried this with the “Mask” and with the “slider containers”…no luck.
@anon55398716 apply the interaction to your project intro container and use the slider trigger, set the initial appearance to display none then when it slides in to view make it display again, that should do the trick.
The project intro container only holds the main image that isn’t part of the slider content…
Ah I see that you don’t have this inside every slide, use a div wrapper put your slide content in the wrapper, apply the interactions to that wrapper.
Edit: I just tried this in the preview-mode and it worked, it’s not smooth though.
Thank again for helping out. 'tis must be a smooth transition for it to be successful.
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
Hi @anon55398716, I know you have been waiting a long time for an adaptiveHeight feature update to the built in Slider widget, but at the moment, the only way to have an adaptive height slider is to use an adaptive slider jQuery plugin like Slick Slider.
Here is an example site with a very basic Slick Slider: Auto Height Slider Example using Slick - Webflow
Webflow does not yet support features that are not built in, but there is help available for custom code things like this at https://experts.webflow.com.
