Height not auto adjusted with the content

[supratim03]

I am react-slick to show some carousal, but if first carousal content is more that height automatically set for other slides too. Second every slides wrapping up inside a div, which I dont want.

Below setting I am using, const settings = { infinite: true, speed: 500, slidesToShow: 1, slidesToScroll: 1, arrows: false, adaptiveHeight: false, rows: 0, responsive: [ { breakpoint: 1024, settings: { slidesToShow: 1, slidesToScroll: 1, infinite: true, }, }, { breakpoint: 600, settings: { slidesToShow: 1, slidesToScroll: 1, infinite: true, }, }, { breakpoint: 480, settings: { slidesToShow: 1, slidesToScroll: 1, infinite: true, }, }, ], };

What is the expected behaviour?

1.Height should be calculated for every slides based on content rather than set default height based on the first content

2. I want to remove that wrapping div which causing me UI issues. I tried to apply style to that particular wrapping div which did not work out. I tried below code,

.slick-slider .slick-active .slick-current > div{ height: 100% !important; }

====================================================================

What is observed behaviour?

1 Height set default based on the first slide content.

2. Need to remove the wrapping div.

[leonardeveloper]

Have you tried setting the .slick-slide height equally?