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.
1.Install
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
1 2 3 | <span class="token keyword">import</span> <span class="token string">"~slick-carousel/slick/slick.css"</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token string">"~slick-carousel/slick/slick-theme.css"</span> <span class="token punctuation">;</span> |
2.Api
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <span class="token keyword">import</span> React <span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react"</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> Slider <span class="token keyword">from</span> <span class="token string">"react-slick"</span> <span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">SimpleSlider</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span> <span class="token function">render</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> settings <span class="token operator">=</span> <span class="token punctuation">{</span> dots <span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">,</span> infinite <span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">,</span> speed <span class="token punctuation">:</span> <span class="token number">500</span> <span class="token punctuation">,</span> slidesToShow <span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">,</span> slidesToScroll <span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span> div <span class="token operator">></span> <span class="token operator"><</span> h2 <span class="token operator">></span> Single Item <span class="token operator"><</span> <span class="token operator">/</span> h2 <span class="token operator">></span> <span class="token operator"><</span> Slider <span class="token punctuation">{</span> <span class="token operator">...</span> settings <span class="token punctuation">}</span> <span class="token operator">></span> <span class="token operator"><</span> div <span class="token operator">></span> <span class="token operator"><</span> h3 <span class="token operator">></span> <span class="token number">1</span> <span class="token operator"><</span> <span class="token operator">/</span> h3 <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> div <span class="token operator">></span> <span class="token operator"><</span> h3 <span class="token operator">></span> <span class="token number">2</span> <span class="token operator"><</span> <span class="token operator">/</span> h3 <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> div <span class="token operator">></span> <span class="token operator"><</span> h3 <span class="token operator">></span> <span class="token number">3</span> <span class="token operator"><</span> <span class="token operator">/</span> h3 <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> div <span class="token operator">></span> <span class="token operator"><</span> h3 <span class="token operator">></span> <span class="token number">4</span> <span class="token operator"><</span> <span class="token operator">/</span> h3 <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> div <span class="token operator">></span> <span class="token operator"><</span> h3 <span class="token operator">></span> <span class="token number">5</span> <span class="token operator"><</span> <span class="token operator">/</span> h3 <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> div <span class="token operator">></span> <span class="token operator"><</span> h3 <span class="token operator">></span> <span class="token number">6</span> <span class="token operator"><</span> <span class="token operator">/</span> h3 <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> Slider <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
3.1 Use next and prev with your button
a) React
Use normal react
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | <span class="token keyword">import</span> React <span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react"</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> Slider <span class="token keyword">from</span> <span class="token string">"react-slick"</span> <span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">PreviousNextMethods</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span> <span class="token function">constructor</span> <span class="token punctuation">(</span> props <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">super</span> <span class="token punctuation">(</span> props <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> next <span class="token operator">=</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> next <span class="token punctuation">.</span> <span class="token function">bind</span> <span class="token punctuation">(</span> <span class="token keyword">this</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> previous <span class="token operator">=</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> previous <span class="token punctuation">.</span> <span class="token function">bind</span> <span class="token punctuation">(</span> <span class="token keyword">this</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">next</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> slider <span class="token punctuation">.</span> <span class="token function">slickNext</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">previous</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> slider <span class="token punctuation">.</span> <span class="token function">slickPrev</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">render</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> settings <span class="token operator">=</span> <span class="token punctuation">{</span> dots <span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">,</span> infinite <span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">,</span> speed <span class="token punctuation">:</span> <span class="token number">500</span> <span class="token punctuation">,</span> slidesToShow <span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">,</span> slidesToScroll <span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span> div <span class="token operator">></span> <span class="token operator"><</span> h2 <span class="token operator">></span> Previous and Next methods <span class="token operator"><</span> <span class="token operator">/</span> h2 <span class="token operator">></span> <span class="token operator"><</span> Slider ref <span class="token operator">=</span> <span class="token punctuation">{</span> c <span class="token operator">=></span> <span class="token punctuation">(</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> slider <span class="token operator">=</span> c <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">{</span> <span class="token operator">...</span> settings <span class="token punctuation">}</span> <span class="token operator">></span> <span class="token operator"><</span> div key <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token number">1</span> <span class="token punctuation">}</span> <span class="token operator">></span> <span class="token operator"><</span> h3 <span class="token operator">></span> <span class="token number">1</span> <span class="token operator"><</span> <span class="token operator">/</span> h3 <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> div key <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token number">2</span> <span class="token punctuation">}</span> <span class="token operator">></span> <span class="token operator"><</span> h3 <span class="token operator">></span> <span class="token number">2</span> <span class="token operator"><</span> <span class="token operator">/</span> h3 <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> div key <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token number">3</span> <span class="token punctuation">}</span> <span class="token operator">></span> <span class="token operator"><</span> h3 <span class="token operator">></span> <span class="token number">3</span> <span class="token operator"><</span> <span class="token operator">/</span> h3 <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> div key <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token number">4</span> <span class="token punctuation">}</span> <span class="token operator">></span> <span class="token operator"><</span> h3 <span class="token operator">></span> <span class="token number">4</span> <span class="token operator"><</span> <span class="token operator">/</span> h3 <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> div key <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token number">5</span> <span class="token punctuation">}</span> <span class="token operator">></span> <span class="token operator"><</span> h3 <span class="token operator">></span> <span class="token number">5</span> <span class="token operator"><</span> <span class="token operator">/</span> h3 <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> div key <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token number">6</span> <span class="token punctuation">}</span> <span class="token operator">></span> <span class="token operator"><</span> h3 <span class="token operator">></span> <span class="token number">6</span> <span class="token operator"><</span> <span class="token operator">/</span> h3 <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> Slider <span class="token operator">></span> <span class="token operator"><</span> div style <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">{</span> textAlign <span class="token punctuation">:</span> <span class="token string">"center"</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token operator">></span> <span class="token operator"><</span> button className <span class="token operator">=</span> <span class="token string">"button"</span> onClick <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> previous <span class="token punctuation">}</span> <span class="token operator">></span> Previous <span class="token operator"><</span> <span class="token operator">/</span> button <span class="token operator">></span> <span class="token operator"><</span> button className <span class="token operator">=</span> <span class="token string">"button"</span> onClick <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> next <span class="token punctuation">}</span> <span class="token operator">></span> Next <span class="token operator"><</span> <span class="token operator">/</span> button <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | <span class="token keyword">import</span> React <span class="token punctuation">,</span> <span class="token punctuation">{</span> useState <span class="token punctuation">,</span> useRef <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> Slider <span class="token keyword">from</span> <span class="token string">'react-slick'</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token function-variable function">SimpleSlider</span> <span class="token operator">=</span> props <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> ref <span class="token operator">=</span> <span class="token function">useRef</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token function-variable function">next</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> ref <span class="token punctuation">.</span> current <span class="token punctuation">.</span> <span class="token function">slickNext</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token function-variable function">previous</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> ref <span class="token punctuation">.</span> current <span class="token punctuation">.</span> <span class="token function">slickPrev</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> settings <span class="token operator">=</span> <span class="token punctuation">{</span> className <span class="token punctuation">:</span> <span class="token string">'section-outstanding__slider'</span> <span class="token punctuation">,</span> slidesToShow <span class="token punctuation">:</span> <span class="token number">3</span> <span class="token punctuation">,</span> slidesToScroll <span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">,</span> arrows <span class="token punctuation">:</span> <span class="token boolean">false</span> <span class="token punctuation">,</span> infinite <span class="token punctuation">:</span> <span class="token boolean">false</span> <span class="token punctuation">,</span> rows <span class="token punctuation">:</span> <span class="token number">2</span> <span class="token punctuation">,</span> responsive <span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> breakpoint <span class="token punctuation">:</span> <span class="token number">1198</span> <span class="token punctuation">,</span> settings <span class="token punctuation">:</span> <span class="token punctuation">{</span> slidesToShow <span class="token punctuation">:</span> <span class="token number">2</span> <span class="token punctuation">,</span> slidesToScroll <span class="token punctuation">:</span> <span class="token number">2</span> <span class="token punctuation">,</span> rows <span class="token punctuation">:</span> <span class="token number">2</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> breakpoint <span class="token punctuation">:</span> <span class="token number">576</span> <span class="token punctuation">,</span> settings <span class="token punctuation">:</span> <span class="token punctuation">{</span> slidesToShow <span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">,</span> slidesToScroll <span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">,</span> rows <span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span> Slider ref <span class="token operator">=</span> <span class="token punctuation">{</span> ref <span class="token punctuation">}</span> <span class="token punctuation">{</span> <span class="token operator">...</span> settings <span class="token punctuation">}</span> <span class="token operator">></span> <span class="token operator"><</span> div <span class="token operator">></span> <span class="token operator"><</span> h3 <span class="token operator">></span> <span class="token number">1</span> <span class="token operator"><</span> <span class="token operator">/</span> h3 <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> div <span class="token operator">></span> <span class="token operator"><</span> h3 <span class="token operator">></span> <span class="token number">2</span> <span class="token operator"><</span> <span class="token operator">/</span> h3 <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> div <span class="token operator">></span> <span class="token operator"><</span> h3 <span class="token operator">></span> <span class="token number">3</span> <span class="token operator"><</span> <span class="token operator">/</span> h3 <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> div <span class="token operator">></span> <span class="token operator"><</span> h3 <span class="token operator">></span> <span class="token number">4</span> <span class="token operator"><</span> <span class="token operator">/</span> h3 <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> div <span class="token operator">></span> <span class="token operator"><</span> h3 <span class="token operator">></span> <span class="token number">5</span> <span class="token operator"><</span> <span class="token operator">/</span> h3 <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> div <span class="token operator">></span> <span class="token operator"><</span> h3 <span class="token operator">></span> <span class="token number">6</span> <span class="token operator"><</span> <span class="token operator">/</span> h3 <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> Slider <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> SimpleSlider <span class="token punctuation">;</span> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 | <span class="token keyword">import</span> React <span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react"</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> Slider <span class="token keyword">from</span> <span class="token string">"react-slick"</span> <span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">AsNavFor</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span> <span class="token function">constructor</span> <span class="token punctuation">(</span> props <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">super</span> <span class="token punctuation">(</span> props <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token operator">=</span> <span class="token punctuation">{</span> nav1 <span class="token punctuation">:</span> <span class="token keyword">null</span> <span class="token punctuation">,</span> nav2 <span class="token punctuation">:</span> <span class="token keyword">null</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">componentDidMount</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">setState</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> nav1 <span class="token punctuation">:</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> slider1 <span class="token punctuation">,</span> nav2 <span class="token punctuation">:</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> slider2 <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">render</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span> div <span class="token operator">></span> <span class="token operator"><</span> h2 <span class="token operator">></span> Slider <span class="token function">Syncing</span> <span class="token punctuation">(</span> AsNavFor <span class="token punctuation">)</span> <span class="token operator"><</span> <span class="token operator">/</span> h2 <span class="token operator">></span> <span class="token operator"><</span> h4 <span class="token operator">></span> First Slider <span class="token operator"><</span> <span class="token operator">/</span> h4 <span class="token operator">></span> <span class="token operator"><</span> Slider asNavFor <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token punctuation">.</span> nav2 <span class="token punctuation">}</span> ref <span class="token operator">=</span> <span class="token punctuation">{</span> slider <span class="token operator">=></span> <span class="token punctuation">(</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> slider1 <span class="token operator">=</span> slider <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token operator">></span> <span class="token operator"><</span> div <span class="token operator">></span> <span class="token operator"><</span> h3 <span class="token operator">></span> <span class="token number">1</span> <span class="token operator"><</span> <span class="token operator">/</span> h3 <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> div <span class="token operator">></span> <span class="token operator"><</span> h3 <span class="token operator">></span> <span class="token number">2</span> <span class="token operator"><</span> <span class="token operator">/</span> h3 <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> div <span class="token operator">></span> <span class="token operator"><</span> h3 <span class="token operator">></span> <span class="token number">3</span> <span class="token operator"><</span> <span class="token operator">/</span> h3 <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> div <span class="token operator">></span> <span class="token operator"><</span> h3 <span class="token operator">></span> <span class="token number">4</span> <span class="token operator"><</span> <span class="token operator">/</span> h3 <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> div <span class="token operator">></span> <span class="token operator"><</span> h3 <span class="token operator">></span> <span class="token number">5</span> <span class="token operator"><</span> <span class="token operator">/</span> h3 <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> div <span class="token operator">></span> <span class="token operator"><</span> h3 <span class="token operator">></span> <span class="token number">6</span> <span class="token operator"><</span> <span class="token operator">/</span> h3 <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> Slider <span class="token operator">></span> <span class="token operator"><</span> h4 <span class="token operator">></span> Second Slider <span class="token operator"><</span> <span class="token operator">/</span> h4 <span class="token operator">></span> <span class="token operator"><</span> Slider asNavFor <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token punctuation">.</span> nav1 <span class="token punctuation">}</span> ref <span class="token operator">=</span> <span class="token punctuation">{</span> slider <span class="token operator">=></span> <span class="token punctuation">(</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> slider2 <span class="token operator">=</span> slider <span class="token punctuation">)</span> <span class="token punctuation">}</span> slidesToShow <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token number">3</span> <span class="token punctuation">}</span> swipeToSlide <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> focusOnSelect <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token operator">></span> <span class="token operator"><</span> div <span class="token operator">></span> <span class="token operator"><</span> h3 <span class="token operator">></span> <span class="token number">1</span> <span class="token operator"><</span> <span class="token operator">/</span> h3 <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> div <span class="token operator">></span> <span class="token operator"><</span> h3 <span class="token operator">></span> <span class="token number">2</span> <span class="token operator"><</span> <span class="token operator">/</span> h3 <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> div <span class="token operator">></span> <span class="token operator"><</span> h3 <span class="token operator">></span> <span class="token number">3</span> <span class="token operator"><</span> <span class="token operator">/</span> h3 <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> div <span class="token operator">></span> <span class="token operator"><</span> h3 <span class="token operator">></span> <span class="token number">4</span> <span class="token operator"><</span> <span class="token operator">/</span> h3 <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> div <span class="token operator">></span> <span class="token operator"><</span> h3 <span class="token operator">></span> <span class="token number">5</span> <span class="token operator"><</span> <span class="token operator">/</span> h3 <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> div <span class="token operator">></span> <span class="token operator"><</span> h3 <span class="token operator">></span> <span class="token number">6</span> <span class="token operator"><</span> <span class="token operator">/</span> h3 <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> Slider <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
b) Hook
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | <span class="token keyword">import</span> React <span class="token punctuation">,</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> Slider <span class="token keyword">from</span> <span class="token string">'react-slick'</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token function-variable function">AsNavFor</span> <span class="token operator">=</span> props <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">[</span> nav1 <span class="token punctuation">,</span> setNav1 <span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token punctuation">[</span> nav2 <span class="token punctuation">,</span> setNav2 <span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span> Slider asNavFor <span class="token operator">=</span> <span class="token punctuation">{</span> nav2 <span class="token punctuation">}</span> ref <span class="token operator">=</span> <span class="token punctuation">{</span> c <span class="token operator">=></span> <span class="token function">setNav1</span> <span class="token punctuation">(</span> c <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token operator">></span> <span class="token operator"><</span> div <span class="token operator">></span> <span class="token operator"><</span> h3 <span class="token operator">></span> <span class="token number">1</span> <span class="token operator"><</span> <span class="token operator">/</span> h3 <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> div <span class="token operator">></span> <span class="token operator"><</span> h3 <span class="token operator">></span> <span class="token number">2</span> <span class="token operator"><</span> <span class="token operator">/</span> h3 <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> div <span class="token operator">></span> <span class="token operator"><</span> h3 <span class="token operator">></span> <span class="token number">3</span> <span class="token operator"><</span> <span class="token operator">/</span> h3 <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> div <span class="token operator">></span> <span class="token operator"><</span> h3 <span class="token operator">></span> <span class="token number">4</span> <span class="token operator"><</span> <span class="token operator">/</span> h3 <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> div <span class="token operator">></span> <span class="token operator"><</span> h3 <span class="token operator">></span> <span class="token number">5</span> <span class="token operator"><</span> <span class="token operator">/</span> h3 <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> div <span class="token operator">></span> <span class="token operator"><</span> h3 <span class="token operator">></span> <span class="token number">6</span> <span class="token operator"><</span> <span class="token operator">/</span> h3 <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> Slider <span class="token operator">></span> <span class="token operator"><</span> Slider asNavFor <span class="token operator">=</span> <span class="token punctuation">{</span> nav1 <span class="token punctuation">}</span> ref <span class="token operator">=</span> <span class="token punctuation">{</span> c <span class="token operator">=></span> <span class="token function">setNav2</span> <span class="token punctuation">(</span> c <span class="token punctuation">)</span> <span class="token punctuation">}</span> slidesToShow <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token number">5</span> <span class="token punctuation">}</span> swipeToSlide <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> focusOnSelect <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> arrows <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token boolean">false</span> <span class="token punctuation">}</span> <span class="token operator">></span> <span class="token operator"><</span> div <span class="token operator">></span> <span class="token operator"><</span> h3 <span class="token operator">></span> <span class="token number">1</span> <span class="token operator"><</span> <span class="token operator">/</span> h3 <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> div <span class="token operator">></span> <span class="token operator"><</span> h3 <span class="token operator">></span> <span class="token number">2</span> <span class="token operator"><</span> <span class="token operator">/</span> h3 <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> div <span class="token operator">></span> <span class="token operator"><</span> h3 <span class="token operator">></span> <span class="token number">3</span> <span class="token operator"><</span> <span class="token operator">/</span> h3 <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> div <span class="token operator">></span> <span class="token operator"><</span> h3 <span class="token operator">></span> <span class="token number">4</span> <span class="token operator"><</span> <span class="token operator">/</span> h3 <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> div <span class="token operator">></span> <span class="token operator"><</span> h3 <span class="token operator">></span> <span class="token number">5</span> <span class="token operator"><</span> <span class="token operator">/</span> h3 <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> div <span class="token operator">></span> <span class="token operator"><</span> h3 <span class="token operator">></span> <span class="token number">6</span> <span class="token operator"><</span> <span class="token operator">/</span> h3 <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> Slider <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> AsNavFor <span class="token punctuation">;</span> |
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 !!