Slick: auto height property?

[flomic]

Is there already a possibility to set a auto height property? Currently the carousel has the height of the tallest element.

[kenwheeler]

I'm not a huge fan of auto height carousels. Especially ones that autoplay. They push content out of the way and mess with the rendering. It's bad UX. That's what you're talking about right?

[flomic]

i was trying to create a slider for a sidebar, but as the elements highly differ in their size once i reach a small one there is a huge white space between the element and the following content underneath... so thats why it would be nice if the whole slider would adapt its height instead of only the elements inside

[davidspiess]

I have the same problem as flomic. This would be a great addition imo. Why would that be bad UX? If one item of the carousel has longer/shorter text than the one before i find it natural to adapt the hight.

[kenwheeler]

You know what. I'm sorry, I can't do this one. Here is why:

1. It fucks with responsive. If you set a height on it, it stutters the scaling because you need to reset the height as the window scales.
2. It is SHITTY ass UX. If the slider height jumps 200px, the user is chasing the controls around.
3. It is bad for performance. You are pushing elements down the page, causing not only repaint, but reflow, on a massive scale.
4. It only works reliably with one slide at a time.

I'm sorry. You can make them fit with css, or use overflow:scroll. Trust me, your users will thank me.

[vanboom]

Thanks for this advice... I was searching for an auto-height solution but after some thought, and using Foundation Orbit with auto-height, I agree that auto-height is quote: "SHITTY ass UX!" :)

Thanks for a great slider.

[kenwheeler]

@vanboom thanks man. The reflow just isn't worth it, everything on the page is going up and down, its a mess.

[vanboom]

Hi Ken,I am trying to get the id of the current slide div in the onAfterChange callback - how would you do it?

slide 1

slide 2

Is the first argument for onAfterChange callback the slider or the slide? thanks,Don Vanboom

Date: Mon, 1 Sep 2014 09:54:29 -0700
From: [email protected]
To: [email protected]
CC: [email protected]
Subject: Re: [slick] auto height property? (#83)

@vanboom thanks man. The reflow just isn't worth it, everything on the page is going up and down, its a mess.

—
Reply to this email directly or view it on GitHub.

[vanboom]

I figured it out... The first argument is the slider itself... so we can access slides by indexslider.$slidesindexthanks,Don

From: [email protected]
To: [email protected]
Subject: RE: [slick] auto height property? (#83)
Date: Mon, 1 Sep 2014 12:50:18 -0500

Hi Ken,I am trying to get the id of the current slide div in the onAfterChange callback - how would you do it?

slide 1

slide 2

Is the first argument for onAfterChange callback the slider or the slide? thanks,Don Vanboom

Date: Mon, 1 Sep 2014 09:54:29 -0700
From: [email protected]
To: [email protected]
CC: [email protected]
Subject: Re: [slick] auto height property? (#83)

@vanboom thanks man. The reflow just isn't worth it, everything on the page is going up and down, its a mess.

—
Reply to this email directly or view it on GitHub.

[barrypeterson]

I'm confused, is this not "AdaptiveHeight"?

[solenoo]

I think there are a few reasons why adaptiveHeight should be implemented:

1. When you have a slider where every slide is an image with a set width and height, once the window goes below that width you want to scale that image you can't change it's width but let it's height be as it is.
2. Even if you have different slides of your slider with different height at some point you can easily just set a breakpoint on which from that point on your slider with no longer autoplay, which I really doubt anyone will care about on mobile devices or tablets.

[andreyvolokitin]

It fucks with responsive. If you set a height on it, it stutters the scaling because you need to reset the height as the window scales.

• kenwheeler

As I see it - individual items inside container may stay perfectly responsive without set height, it is only container that adapt its height to the tallest visible item. So I can not see how it can impact responsiveness.

It is SHITTY ass UX. If the slider height jumps 200px, the user is chasing the controls around.

• kenwheeler

This is not necessary the case. Controls can be styled as needed - i.e. they can use positioning in pixels instead of vertical centering, so they will just stay in place when height is changed.

It is bad for performance. You are pushing elements down the page, causing not only repaint, but reflow, on a massive scale.

• kenwheeler

Everything could be bad for performance when misused. Autoheight can be used in strict narrow scenarios when it will not impact significantly anything performance-wise. If we set it on every 100 of carousels on the page while each of them is autoplaying then definitely yes this is bad. But if we put autoheight on the single element which is not autoplaying (and where it could actually be needed, despite of all critisism - there are valid usecases for autoheight), then I do not see anything really bad.

What I am trying to say - if autoheight will be implemented it does not mean that it should and would be used everywhere, but it could actually be very handy and quite appropriate in very specific cases.

[sherri3]

Ken, I am trying to use your awesome script but only have experience with html and css. I wonder if you could help me with another height issue? I am using the responsive slider and have added a border to each individual div. I would like the height to be the same for each div so the boxes line up evenly. I tried using a min-height in css but it doesn't look right at different screen sizes. Any suggestions?

[leggomuhgreggo]

@sherri3 we try to use the github issue tracker for bugs, but if you recreate the issue in a fiddle you have a better chance of getting help. Sounds like you might just need to add a fixed height on .slick-slide

Even better, there's a gitter chat that we set up for more support oriented questions--check out the contribution guidelines

[gate3]

Hi, I hope i am not too late to contribute to this. I was able to resolve this issue by doing the following:

1) I used the afterChange event to capture when a slide has changed and also to fetch the current slide.
2) My intention was to target the div inside each of the slick slide divs. So I did something like this:

var cur = $('div.nd2-card.quote-card').get(currentSlide + 1);

NB: I had to use currentSlide + 1 because for some reason it was fetching the div from previous slide.

Where "div.nd2-card.quote-card" is the name of the div i am targeting inside the slide.

3) Then i fetched the container itself (The one i initialized slick on) and changed the property to the currently displayed slide.

$('.testimonial-slides').animate({height:($(cur).height() + 10)}, 500);

The overall code looks something like this

$(document).ready(function(){
$('.testimonial-slides').on('afterChange', function(event, slick, currentSlide, nextSlide){
var cur = $('div.nd2-card.quote-card').get(currentSlide + 1);
$('.testimonial-slides').animate({height:($(cur).height() + 10)}, 500);
});
});

FYI/Disclaimer: I know this is an anti-pattern but my client demanded it and i had to make it happen. I would not have used this on a project i have full control over.

[vinayak519]

@gate3 I have done similar way: Here is if anyone coming here to search the Slick js adaptive height issue with multiple slides: I been searching since this morning and I made it. This is just a backup if any client ask for this feature or else this slider is great as default. Im not master in JS so spare me if longest method used.

My html Structure:

<div class="course_list">
    <div class="course_item">sliders</div>
    <div class="course_item">sliders</div>
    <div class="course_item">sliders</div>
    <div class="course_item">sliders</div>
    <div class="course_item">sliders</div>
</div>

Hack:
```
// After Change set the height - Check the class "slick-active" for which has the highest height
$('.course_list').on('afterChange', function(event, slick, currentSlide, nextSlide){

  // Check the class "slick-active" for which has the highest height 
  var maxHeight = Math.max.apply(null, $(".course_item.slick-active").map(function ()
  {
      return $(this).height();
  }).get());      

  // Apply the height to the slider conatiner to adapt the height
  // .css overflow added to prevent hide arrows on change - it adds overflow hidden by default
  $(this).animate({height: maxHeight + 30}, 500).css({ overflow:'visible'});

});

On wait what about when the document loaded (website loaded it still shows white space) ? Add the same on load function to adapt the height on load:

    ```
// on Load set the auto height to the slider container so it adjusts the height
    $(window).on('load', function(){

      // Check the class "slick-active" for which has the heighest height 
      var maxHeight = Math.max.apply(null, $(".course_item.slick-active").map(function ()
      {
          return $(this).height();
      }).get());

      // Apply the height to the slider conatiner to adapt the height
      $('.course_list').animate({height: maxHeight + 30 }, 500);

    });