Slick: Refresh slider height from within?

[matthewlyle]

First of all: thanks so much for this slider. I've used it between one million and two million times in the past year.

The problem:

I have a slider inside another slider... both needing adaptive heights.

I'm already using custom events to trigger the slide changes so I just need something that will say "hey, outside slider, things are changing inside of here." My solution to changing the height of a slider after doing things with javascript is usually to do .slickSetOption(null,null,true) but that's not working here, which makes sense.

So the question:

How can I refresh the heights of a slider manually without destroying it? It resizes on window resize... so I assume there's something somewhere that I can do... I'm just not sure what.

Any help is appreciated.

Thanks.

[kris-ellery]

I would also like to know how to make it work. I have nested sliders and need to update slide height based on it's dynamic content.

In example, one slide contains an accordion and when I expand the content the slide doesn't grow with it. A custom trigger would be appreciated.

Thanks!

EDIT:

Actually, I got it working with the settings below.

$('.inner-slider').slick({
  onAfterChange: function() {
    $('.outer-slider').slickSetOption(null, null, true);
  }
});

.outer-slider > .slick-list {
  transition: all .3s ease;
}

[apfelbox]

I used similar code and it worked.

Please note, that you need to reset the height before calling the setOption helper. Slick sets fixed heights on the slides and the update won't have any effect, otherwise.

Example code:

$slider.find(".slick-slide").height("auto");
$slider.slick("setOption", null, null, true);

[motolabs]

+1
Seems as though when I resize the browser it snaps into appropriate height.

[AndreyPatseiko]

Did not work until I changed the code to this ( instead null of ")
$slider.find(".slick-slide").height("auto");
$slider.slick("setOption", '', '', true);

[dambrogia]

I'm using nested sliders and my problem is that when the inner slider initializes when data is returned from an AJAX request. Obviously the height for the outer slide has been setfrom the content-less inner slider.

To achieve the desired height of the outer slider I had to do the following:

$slider.find('.slick-slide').height('auto');
$slider.find('.slick-list').height('auto');
$slider.slick('setOption', null, null, true);

Hope this helps someone, thanks for everyone's input 👍

[chrisandrewcl]

Similar case here. I had content being added/changed via AJAX inside the slider after the page load and according to user interaction.

This worked best for me:

$slider[0].slick.animateHeight();

[azhdarshirinzada]

+1

[khushbupatel24]

I used similar code and it worked.

Please note, that you need to reset the height before calling the setOption helper. Slick sets fixed heights on the slides and the update won't have any effect, otherwise.

Example code:

$slider.find(".slick-slide").height("auto");
$slider.slick("setOption", null, null, true);

@apfelbox

can you please help me,

I have a read more button in caption, which expand the caption content on click. For that, I want height auto for slick-slide. I understood your answer but I don't know where should I include these lines in my code? Can you please help?

here is my code-

$('.app_slider').slick({
            dots: true,
            arrows: false,
            infinite: false,
            slidesToShow: 1,
            slidesToScroll: 1,
            adaptiveHeight: true,
            touchThreshold: 10
        });

[apfelbox]

You should include this call in the click event handler of your "read more" button.