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

Bài đăng này đã không được cập nhật trong 4 năm

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.

<link rel="stylesheet" type="text/css" href="slick/slick.css"/>

hoặc dùng CDN:

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>

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

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>

hoặc dùng CDN:

<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

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:

<div class="your-class">
  <div>your content</div>
  <div>your content</div>
  <div>your content</div>
</div>

Initialize carousel slider:

$(document).ready(function(){
  $('.your-class').slick({
    // các settings ...
  });
});

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

 <div data-slick='{"slidesToShow": 4, "slidesToScroll": 4}'>
      <div><h3>1</h3></div>
      <div><h3>2</h3></div>
      <div><h3>3</h3></div>
      <div><h3>4</h3></div>
      <div><h3>5</h3></div>
      <div><h3>6</h3></div>
</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:

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

Multiple sliders:

$('.multiple-items').slick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 3
});

Lazy Loading:

    ...
    <img data-lazy="img/lazyfonz1.png"/>
    ...

$('.lazy').slick({
  lazyLoad: 'ondemand',
  slidesToShow: 3,
  slidesToScroll: 1
});

autoplay:

$('.autoplay').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 2000,
});

Fade:

$('.fade').slick({
  dots: true,
  infinite: true,
  speed: 500,
  fade: true,
  cssEase: 'linear'
});

Center Mode:

$('.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
      }
    }
  ]
});