How to force the slides to have fixed height without breaking centering and navigation?

[michalczaplinski]

I can see that in every example, the width of the elements with .slick-track and .slick-slider changes as the user resizes the window, which then affects the height of the carousel.

What I would like is to be able to fix the height of the carousel in such a way that the slides do not resize as I resize the browser window. Think: iTunes Store carousel.

What I have tried:

Setting:

.slick-slide { width: 500px !important; }

and in the carousel settings:

<Slider
  adaptiveHeight={false}
  variableWidth={false}
  centerPadding={0}
  autoplay
  centerMode
  slidesToShow={3}
  slidesToScroll={1}
  swipe
  draggable={false}
  infinite
>

This achieves the desired effect, but causes the carousel layout and navigation to break (the arrow click moves the carousel by less than the whole image and the middle slide is not centered anymore:

[vijayst]

i have the same problem!

[jsamr]

@vijayst @michalczaplinski try this:

  .slick-slide {
    height: auto; // ← that must not be ignored
  }
  .slick-track {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
  }

[yenly]

Didn't the original slick library recommend using variableWidth: true?

http://kenwheeler.github.io/slick/

[laveesingh]

This doesn't seem to be a problem with react-slick library. You can take a look at varaibleWidth prop if that can help in some way. Please feel free to request reopen if disagree.

[itsmichaeldiego]

@laveesingh I think it is a problem yes, the adaptiveHeight is not working correctly

[shermdevc]

@vijayst @michalczaplinski try this:

  .slick-slide {
    height: auto; // ← that must not be ignored
  }
  .slick-track {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
  }

really helped me , Thanks dear

[Quad-Plex]

  .slick-slide {
    height: auto; // ← that must not be ignored
  }

I had a somewhat unrelated issue where slick would continually add to the height of my individual slick-slides when they were moved, extending them downwards, height: auto !important ended up being the fix I needed, thanks a lot @jsamr!

[badeed]

.slick-slide {
  height: auto !important;
}

.slick-track {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
}

.slick-slide > div {
/*
Card CSS goes here
*/
}

There was one step missing for me. Since there is a <div> element for each slide in the slider(could be just a me issue) i had to edit the direct div child as my Card body for it to work finally.

i am not quite sure if i needed all the !impotant but i was fed up with testing and trying.

[sanchezcande]

The thing is that the page starts bouncing when I put the height in auto, how can I correct that? I used the min-height but I was having this issue you had that it stops being centered

[argumentis]

@vijayst @michalczaplinski try this:

  .slick-slide {
    height: auto; // ← that must not be ignored
  }
  .slick-track {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
  }

You are the best!