I am creating a slider in react with Slick Slider. The problem is: when the screen size changes, the slides reduce in size or stack on top of each other.

Slick slider offers :

      responsive: [
        {
          breakpoint: 1024,
          settings: {
            slidesToShow: 3,
            slidesToScroll: 3,
            infinite: true,
            dots: true
          }, 
    …
      ]

But this does not prevent the change in size of the slides and does not fix the margin between the slides which are constantly changing.

I tried :

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

In the CSS file, but then the slides accumulate one under the other, generating 4 rows instead of 2. Also, the animation is too large and create a blank space at the end of the slider.

Is it possible to create a slider with slides, that keep the same size and space between them whatever the size of the window? A way to keep a fixed size of slides, showing only the number of slides possible on the screen and showing only a part (or not) of the following slides?

So as to be responsive as well. What is wanted :

Here is my code :

      const settings = {
        rows: 2,
        slidesPerRow: 1,
        slidesToShow: 3.2,
        infinite: false,
        swipeToSlide: true,
        slidesToScroll: 1,
        lazyLoad: true,
        responsive: [
            {
              breakpoint: 1200,
              settings: {
                  slidesToShow: 2.5,
                  slidesToScroll: 2,
              }
            },
            {
                breakpoint: 1024,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 2,
                }
            },
            {
                breakpoint: 768,
                settings: {
                    slidesToShow: 1.7,
                    slidesToScroll: 1,
                    arrows: false                }
            },
            {
                breakpoint: 480,
                settings: {
                    slidesToShow: 1.4,
                    slidesToScroll: 1,
                    arrows: false
                }
            }
        ]

      };
     
      return (
        <>
          <h2>…</h2>
          <div className="cell">
            <Slider {...settings}>
                {
                    this.props.data.nodes.map((node,key) => (
                        <Cell node={node} key={key} />
                    ))
                } 
            </Slider>
          </div>
        </>
      );

Thank you!

I am creating a slider in react with Slick Slider. The problem is: when the screen size changes, the slides reduce in size or stack on top of each other.

Slick slider offers :

      responsive: [
        {
          breakpoint: 1024,
          settings: {
            slidesToShow: 3,
            slidesToScroll: 3,
            infinite: true,
            dots: true
          }, 
    …
      ]

But this does not prevent the change in size of the slides and does not fix the margin between the slides which are constantly changing.

I tried :

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

In the CSS file, but then the slides accumulate one under the other, generating 4 rows instead of 2. Also, the animation is too large and create a blank space at the end of the slider.

Is it possible to create a slider with slides, that keep the same size and space between them whatever the size of the window? A way to keep a fixed size of slides, showing only the number of slides possible on the screen and showing only a part (or not) of the following slides?

So as to be responsive as well. What is wanted :

Here is my code :

      const settings = {
        rows: 2,
        slidesPerRow: 1,
        slidesToShow: 3.2,
        infinite: false,
        swipeToSlide: true,
        slidesToScroll: 1,
        lazyLoad: true,
        responsive: [
            {
              breakpoint: 1200,
              settings: {
                  slidesToShow: 2.5,
                  slidesToScroll: 2,
              }
            },
            {
                breakpoint: 1024,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 2,
                }
            },
            {
                breakpoint: 768,
                settings: {
                    slidesToShow: 1.7,
                    slidesToScroll: 1,
                    arrows: false                }
            },
            {
                breakpoint: 480,
                settings: {
                    slidesToShow: 1.4,
                    slidesToScroll: 1,
                    arrows: false
                }
            }
        ]

      };
     
      return (
        <>
          <h2>…</h2>
          <div className="cell">
            <Slider {...settings}>
                {
                    this.props.data.nodes.map((node,key) => (
                        <Cell node={node} key={key} />
                    ))
                } 
            </Slider>
          </div>
        </>
      );

Thank you!

• javascript
• reactjs
• slider
• slick.js
• react-slick

2 Answers 2

ex)

4 slides in 1800px

slidesToShow: _.round((width * 4) / 1800, 1 or 2);

or

https://react-slick.neostack./docs/example/variable-width/

There is a "Variable width" option that can be used to get this kind of result. See more: https://react-slick.neostack./docs/example/variable-width