Jwill
Jwill

Reputation: 71

React-slick reinit

I'm using react-slick slider and can't figure out how I can re-initialize the slider. With the jquery slick plugin, I can call $slick.reInit(), but using react I can't seem to do this. Is there something similar I can do in react to the reinit method?

Upvotes: 7

Views: 5086

Answers (2)

Jorge Luis Monroy
Jorge Luis Monroy

Reputation: 179

You can use a ref

const sliderRef = useRef<Slider | null>(null);

<Slider {...sliderSettings} ref={sliderRef}>
 ...
</Slider>

on then you can execute this wherever you want

sliderRef.current?.slickGoTo(0);

Upvotes: 0

Yasin UYSAL
Yasin UYSAL

Reputation: 619

There is no such feature for now, but there is a way to do it.

If you wrap Slick with a component and give it a unique key, slick reloads each time the key changes

render: function() {
    return <div key={uniqueId}>
               <CarouselComponent>
           </div>;
}

Upvotes: 10

Related Questions