Tạo carousel hiệu quả với Slick

Thứ Tư, 22/04/2020

Tram Ho

Giới thiệu

Slick là một thự viện javascript rất phổ biến dùng để tạo carousel một cách hiệu quả và dễ dàng.
Nó hỗ trợ khá dầy đủ tình năng cho carousel như sau:

Fully responsive. Scales với container .
Separate settings cho từng breakpoint
Swipe enabled / disabled
Desktop mouse dragging
Infinite looping.
Hỗ trợ arrow key navigation
Thêm, xoá, lọc các slides
Autoplay, dots, arrows, callbacks, etc…

Cài đặt

Thêm slick.css vào trong <head>

Nếu bạn download bộ thư viện này về, bạn cần copy file slick.css này và import vào trong project của bạn.

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/css<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>slick/slick.css<span class="token punctuation">"</span></span><span class="token punctuation">/&gt;</span></span>

hoặc dùng CDN:

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/css<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>//cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__">[email protected]</a>/slick/slick.css<span class="token punctuation">"</span></span><span class="token punctuation">/&gt;</span></span>

Thêm slick.jstrước thẻ đóng <body> sau jQuery. jQuery là phải required.

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>//code.jquery.com/jquery-1.11.0.min.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script language-javascript" /><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>//code.jquery.com/jquery-migrate-1.2.1.min.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script language-javascript" /><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>slick/slick.min.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script language-javascript" /><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

hoặc dùng CDN:

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>//cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__">[email protected]</a>/slick/slick.min.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script language-javascript" /><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

Package Managers

Bower

bower install --save slick-carousel

NPM

npm install slick-carousel

Đến đây là xong, bạn có thể bắt đầu dùng được thư viện này rồi.

Cách sử dụng

Set up HTML:

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>your-class<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>your content<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>your content<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>your content<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<div>your content</div>

</div>

Initialize carousel slider:

<span class="token function">$</span><span class="token punctuation">(</span>document<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">ready</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
  <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.your-class'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">slick</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token comment">// các settings ...</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 punctuation">;</span>

$(document).ready(function(){

$('.your-class').slick({

// các settings ...

});

Bạn cũng có thể dùng Data Attribute Settings như sau:

 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">data-slick</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>{<span class="token punctuation">"</span>slidesToShow<span class="token punctuation">"</span>: 4, <span class="token punctuation">"</span>slidesToScroll<span class="token punctuation">"</span>: 4}<span class="token punctuation">'</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span><span class="token punctuation">&gt;</span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span><span class="token punctuation">&gt;</span></span>4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span><span class="token punctuation">&gt;</span></span>5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span><span class="token punctuation">&gt;</span></span>6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

</div>

Refresh browser, bạn sẽ nhận được carousel với các setting default.

Một số settings

Ơ trên là default setting của nó. Có khá nhiều settings bạn có thể dùng tuỳ thuộc vào yêu cầu thực tế của mình.

Default:

    <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.single-item'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">slick</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

$('.single-item').slick();

Multiple sliders:

<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.multiple-items'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">slick</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  infinite<span class="token punctuation">:</span> <span class="token boolean">true</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">3</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

$('.multiple-items').slick({

infinite: true,

slidesToShow: 3,

slidesToScroll: 3

});

Lazy Loading:

    ...
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">data-lazy</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>img/lazyfonz1.png<span class="token punctuation">"</span></span><span class="token punctuation">/&gt;</span></span>
    ...

...

...

<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.lazy'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">slick</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  lazyLoad<span class="token punctuation">:</span> <span class="token string">'ondemand'</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><span class="token punctuation">)</span><span class="token punctuation">;</span>

$('.lazy').slick({

lazyLoad: 'ondemand',

slidesToShow: 3,

slidesToScroll: 1

});

autoplay:

<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.autoplay'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">slick</span><span class="token punctuation">(</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>
  autoplay<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  autoplaySpeed<span class="token punctuation">:</span> <span class="token number">2000</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

$('.autoplay').slick({

slidesToShow: 3,

slidesToScroll: 1,

autoplay: true,

autoplaySpeed: 2000,

});

Fade:

<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.fade'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">slick</span><span class="token punctuation">(</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>
  fade<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  cssEase<span class="token punctuation">:</span> <span class="token string">'linear'</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

$('.fade').slick({

dots: true,

infinite: true,

speed: 500,

fade: true,

cssEase: 'linear'

});

Center Mode:

<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.center'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">slick</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  centerMode<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  centerPadding<span class="token punctuation">:</span> <span class="token string">'60px'</span><span class="token punctuation">,</span>
  slidesToShow<span class="token punctuation">:</span> <span class="token number">3</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">768</span><span class="token punctuation">,</span>
      settings<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        arrows<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
        centerMode<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        centerPadding<span class="token punctuation">:</span> <span class="token string">'40px'</span><span class="token punctuation">,</span>
        slidesToShow<span class="token punctuation">:</span> <span class="token number">3</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">480</span><span class="token punctuation">,</span>
      settings<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        arrows<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
        centerMode<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        centerPadding<span class="token punctuation">:</span> <span class="token string">'40px'</span><span class="token punctuation">,</span>
        slidesToShow<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 punctuation">;</span>

$('.center').slick({

centerMode: true,

centerPadding: '60px',

slidesToShow: 3,

responsive: [

{

breakpoint: 768,

settings: {

arrows: false,

centerMode: true,

centerPadding: '40px',

slidesToShow: 3

}

},

{

breakpoint: 480,

settings: {

arrows: false,

centerMode: true,

centerPadding: '40px',

slidesToShow: 1

}

]

});

Ở đây là một số settings cơ bản thường dùng, còn có nhiều settings nữa bạn có thể tìm thêm trong document của nó.

https://github.com/kenwheeler/slick/

https://kenwheeler.github.io/slick/

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo

Tạo carousel hiệu quả với Slick

Giới thiệu

Cài đặt

Cách sử dụng

Một số settings

TikTok trở thành nền tảng mảng xã hội lớn thứ hai ở Nam Phi

Mất giá nhanh nhất sau 9 tháng ra mắt, iPhone 14 Pro Max tiếp tục phá đáy tại Việt Nam

Hướng dẫn sử dụng ngôn ngữ R cho người mới bắt đầu

10 plugin cần thiết của SublimeText dành cho các lập trình viên JavaScript