Xin chào các bạn vậy là loạt bài về Slick sử dụng Jquery với html thông thường mình đã giới thiệu hết với các bạn. Bài viết này mình viết về cách thức sử dụng Slick trong ReactJs.
1.Cài đặt
Các bạn có thể sử dụng npm hoặc yarn npm install react-slick --save
yarn add react-slick
Sau đó các bạn nhớ import css vào nhé !!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
Vì sức mạnh của React nên react-slick cũng lược không còn một số API như trước đây mình giới thiệu.
Các bạn có thể tham khảo các thuộc tính của nó tại đây nó khá giống với tính năng của api của bài viết slick đầu tiên của mình nên mình sẽ không nói lại phần này.
3.Một vài ví dụ với các trường hợp đặc biệt :
Đây là cách sử dụng slick trong class component. Các Api được setting trong một biến sau đó component Slider sẽ sử dụng nó đối với các thẻ bên trong nó.
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 Sử dụng next và prev bằng button của mình
a) React
Sử dụng react thông thường
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
Vì Hook React sử dụng component class nên nên ta confìg api cho Slick trên một biến bình thường. Nhưng một vấn đề mà mình gặp phải đó là không control được button của slick nên ta cần sử Ref của Hook để trỏ component Slider để lấy ra phương thức slickNext(); và slickPrev(); config button next và pre theo button của chính mình
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 Dùng hai slide control lẫn nhau
a) React
Ở đây ta sử dung state để tương tác qua lại dữa hai slider. Trong component Slider, ref sẽ trỏ tới asNavFor state lẫn nhau của mỗi Slider để khi Slider này có sự thay đổi thì slider cũng có sự thay đổi. Lưu ý là hai slider phải có vị trí tương đương nhau.
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> |
Hy vọng những điều giúp được các bạn sử dụng Sliclk trong react cũng như React Hook. Nếu có vấn đề hay gì hay những trường hợp hay hơn các bạn cùng mình trao đổi để tiến bộ hơn nhé. Cảm ơn !!