React-slick: How to force the slides to have fixed height without breaking centering and navigation?

Created on 27 Apr 2017 · 5Comments · Source: akiran/react-slick

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:

kapture 2017-04-27 at 12 38 43

Source

michalczaplinski

👍1

Most helpful comment

@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;
  }

jsamr on 23 Mar 2018

👍18 🎉5 😄5 ❤1

All 5 comments

i have the same problem!

vijayst on 24 Dec 2017

👍1

@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;
  }

jsamr on 23 Mar 2018

👍18 🎉5 😄5 ❤1

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

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

yenly on 23 Mar 2018

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.