Change settings dynamically

[entiendoNull]

I am using React-Slick for my project and I want to be able to dynamically change the settings that I provide to my slider.

For slickjs (https://github.com/kenwheeler/slick) this can be done using slickSetOption.

I realized that it is not possible to use slickSetOption in React Slick after reading the documentation. However, after reading the following it made me think that it should be possible to in fact change the settings of the slider in a dynamic way.

slickGetOption has been implemented slickSetOption will not be implemented, those effects be achieved by passing props via state from the wrapper component

Originally posted by @laveesingh in https://github.com/akiran/react-slick/issues/1063#issuecomment-368816567

My implementation looks like this, and unless I am using this in a completely wrong way or have misunderstood the above statement this is probably a bug.

<Slider
    dots={true}
    infinite={true}
    speed={500}
    slidesToShow={1}
    slidesToScroll={1}
    autoplaySpeed={2000}
    autoplay={props.autoplay} // even if the value is changed, autoplay stays to it's initial setting
>
    {images}
</Slider>

Using React Slick's playground I've put together this to demonstrate the issue: https://codesandbox.io/s/react-slick-playground-unyot

Sort of a dodgy work around is to add a key prop to <Slider /> and change the value of that as the props changes.

[cryptic022]

Hey, @entiendoNull Other settings property changes dynamically work. This issue was only with autoplay property. Your workaround of adding key is working because it is rendering the component and taking the latest property of autoplay. Here is a working demo with dots property : Link

[entiendoNull]

Sure, I know why the work around works and it's definitely not an ultimate solution - but it is still a solution until autoplay can be changed by simply providing a changed value by props.

For my specific use case, it is in fact only autoplay that I need to be able to turn on/off.

[cryptic022]

@entiendoNull I have created this PR PR for fixing this issue. Hope it gets merged.

[RuiGuilherme]

Same issue here;

<Slider
    {...{
        dots: false,
        accessibility: false,
        infinite: true,
        speed: 2000,
        autoplaySpeed: 5000,
        slidesToShow: 1,
        slidesToScroll: 1,
        pauseOnHover: false,
        autoplay: autoplay
    }}
>

autoplay start with true; If I change prop of autoplay to false, autoplay stop. But if set again to true autoplay don't work. Version: 0.27.11

I don't know if this will help but I fix it using this, fallow example.

[llamerr]

Same problem here, for responsive config. I use const [settings, setSettings] = useState<Settings>({}) which is initially empty, but after updating it in effect, it was not applied. Fixed it for now by moving values that not dynamic for me like customPaging outside of effect.

[sinner]

I have the same problem with the initialSlide settings property.

[venkateshpullaganti]

I have the same problem with the initialSlide settings property.

Did you find any work around @sinner ?

I am currently using the initialSlide as key for the Slider as a workaround.