How to use Slick in React and Hook

Tram Ho

Hello everyone, this is a series of Slick using Jquery with regular html I have introduced all of you. This article I wrote about how to use Slick in ReactJs.


You can use npm or yarn
npm install react-slick --save

yarn add react-slick

Then remember to import the css!
npm install slick-carousel --save


Because of the power of React, the react-slick also has some APIs that I haven’t introduced before.
You can refer to its properties here it is quite similar to the api feature of my first slick article so I will not repeat this section.

3. A few examples with special cases:

Here is how to use slick in the component class. The Api is set in a variable then the Slider component will use it for the tags inside it.

3.1 Use next and prev with your button

a) React

Use normal react

b) React Hook

Because Hook React uses a component class, we have to enable Slick api on a normal variable. But one problem that I encountered was that I could not control the slick button, so I need to use the Ref of Hook to point the Slider component to get the slickNext(); and slickPrev(); config button next and pre follow your own button

3.2 Use two slide controls together

a) React

Here we use the state to interact between two sliders. In the Slider component, ref will point to each other’s asNavFor state for each Slider so that when this Slider changes, the slider will change as well. Note that the two sliders must have the same position.

b) Hook

Hope things help you use Sliclk in react as well as React Hook. If there is a problem or something or better cases you can talk to improve. Thanks !!

Share the news now

Source : Viblo