0

I create a testimonial slide by react-slick.

My code is: 

 const settings = {
      dots: true,
      adaptiveHeight: true,
      swipeToSlide: true,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1,
      autoPlay: true,
      className: 'sample'
    };

Everything works fine. However, when I resize my browser, the width of slide does not change. I check in my console.log, the width of slick-track is always 9900px. I think the width should be changed when I resize my browser.

Could anyone help me to solve this? I think I have a problem with re-render element when resizing browser in reactjs :(.

Thanks

Kevin
  • 55
  • 2
  • 11
  • check with the issues section of the library. It appears to be a very basic issue. Someone would have definitely addressed it. – humanbean May 29 '19 at 13:48
  • are you setting the width anywhere? I see you set height to adaptive, but (and i'm not a react pro) i think you need to set the width to a percentage. – John Lord May 29 '19 at 13:59
  • @JohnLord I do not set the width. The width will be set to the inline style of slick-track. When we resize the browser, the width will be changed dynamically to make the slide responsive – Kevin May 29 '19 at 20:25
  • @humanbean I checked carefully, but in the library, it does not mention about setting width for slider. I checked from other's demo, the width of the demo is dynamically changed when I resize the browser :(. I have no ideas for this case – Kevin May 29 '19 at 20:26

1 Answers1

2

If your goal is to change react-slick options when you resize the browser, use responsive option.

var settings = {
  dots: true,
  infinite: false,
  speed: 500,
  slidesToShow: 4,
  slidesToScroll: 4,
  initialSlide: 0,
  responsive: [
    {
      breakpoint: 1024, // width to change options
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2,
        initialSlide: 2
      }
    }
  ]
}

https://react-slick.neostack.com/docs/example/responsive/

Hiro H
  • 31
  • 4