Other slides don't grow with parent in slider

Design help General
1

Hey all.

I’m trying to build a slider and want them to properly scale. So if Slide 1 scales larger with the content, the 2nd one should too. How should I achieve this? I have made an example project and shared the read-only link. The red background is to show the size of the slide.

Thanks for the help ahead of time.

Here is my site Read-Only: LINK

2

Hey Omer @DontAsk,

I think I figured it out: Your div block called slider_component is set to height of 100% which means it only go as tall as the slider_container that’s inside.

To fix this, select slider_component then set the height to say 600px. This will set a pre-determined height to all the slides.

I hope that helps!

Tyler

3

Thank you for the answer. But in my case I would like the component to scale with its content. So setting it at 600px would not allow it to scale with its content, but rather stay the same size.

4

Hi @DontAsk,

One way you could do this is by using Slick, you’ll just need to use this code within your Page Settings:

Page Settings > Custom Code > Inside tag:


<link rel="stylesheet" type="text/css" href="//[cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css](http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css)"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />

Page Settings > Custom Code > Before tag:


<script type="text/javascript" src="//[cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js](http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js)"></script>
<script>
$('.slider').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
autoplay:true,
adaptiveHeight: true
});
</script>

Here’s the cloneable example project: Auto Height Slider Example using Slick - Webflow

And here’s an example of a live site: https://auto-height-slider-4d0a38.webflow.io/

Hope this helps!

1 Like
5

Thank you, this is exactly it.

1 Like
6

Hey @DontAsk

This code is even better.


<style>
.w-slide [aria-hidden="true"] {
height: 0px;
}
</style>

It can be put in Inside head tag and everything else can be deleted