Trong thiết kế web hiện đại, việc trình bày nội dung dưới dạng Slider (hay Carousel) là một phương pháp hữu hiệu để tiết kiệm không gian và tăng trải nghiệm người dùng. Giữa hàng trăm thư viện có sẵn, Slick Slider (được phát triển bởi Ken Wheeler) vẫn luôn được mệnh danh là “The last carousel you’ll ever need” (Chiếc carousel cuối cùng bạn cần).

Bài viết này sẽ đưa bạn đi từ những khái niệm cơ bản nhất đến các kỹ thuật nâng cao, giúp bạn làm chủ hoàn toàn thư viện này.

Slick Slider là gì và Tại sao nên sử dụng?

Slick Slider là một plugin của jQuery cho phép bạn tạo ra các slider (trình chiếu) mượt mà, hỗ trợ đầy đủ tính năng responsive (tương thích mọi thiết bị).

Các tính năng nổi bật:

Fully Responsive: Tự động điều chỉnh kích thước theo màn hình.
Touch & Swipe: Hỗ trợ vuốt chạm trên thiết bị di động cực nhạy.
Infinite Loop: Vòng lặp vô tận (lướt hết ảnh cuối sẽ quay lại ảnh đầu).
Lazy Loading: Tải ảnh khi cần thiết, giúp tăng tốc độ website (rất tốt cho SEO).
Accessibility: Hỗ trợ điều hướng bằng bàn phím, thân thiện với người dùng.

Hướng dẫn Cài đặt Slick Slider (Setup)

Để sử dụng Slick, bạn cần đảm bảo website đã tích hợp thư viện jQuery (phiên bản 1.7 trở lên). Có 2 cách chính để cài đặt:

Cách 1: Sử dụng CDN (Khuyên dùng cho người mới)

Đây là cách nhanh nhất, bạn không cần tải file về máy. Hãy chèn các đoạn code sau vào thẻ <head> và trước thẻ đóng </body> của file HTML.

Bước 1: Chèn CSS Chèn vào trong thẻ <head>:

HTML

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

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

Bước 2: Chèn JS Chèn vào cuối trang, trước thẻ </body>:

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

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

Cách 2: Cài đặt qua NPM (Dành cho Dev sử dụng Webpack/Gulp)

Nếu bạn đang xây dựng dự án React, Vue hoặc dùng Bundler:

Bash

npm install slick-carousel
# Hoặc
yarn add slick-carousel

Sau đó import vào file JS chính:

JavaScript

import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
import $ from 'jquery'; 
import 'slick-carousel';

Cấu trúc HTML chuẩn cho Slick Slider

Slick hoạt động dựa trên cấu trúc HTML đơn giản: Một thẻ cha (Wrapper) chứa các thẻ con (Slides).

HTML

<div class="your-class">
  <div><img src="image1.jpg" alt="Slick Slider Demo 1"></div>
  <div><img src="image2.jpg" alt="Slick Slider Demo 2"></div>
  <div><img src="image3.jpg" alt="Slick Slider Demo 3"></div>
  <div><img src="image4.jpg" alt="Slick Slider Demo 4"></div>
</div>

Lưu ý quan trọng về SEO: Luôn nhớ thêm thuộc tính alt cho thẻ <img>. Google không thể “nhìn” thấy hình ảnh, nó đọc thuộc tính alt để hiểu nội dung ảnh.

Nếu bạn cảm thấy khó hiểu hãy liên hệ: Thiết kế website Bình Dương TASDIGITAL để mình code ngay cho nhé!

Khởi tạo Slider (Initialization)

Sau khi đã có HTML và chèn thư viện, bạn cần kích hoạt Slick bằng Javascript/jQuery.

JavaScript

$(document).ready(function(){
  $('.your-class').slick({
    // Các tùy chọn cài đặt sẽ nằm ở đây
    setting-name: setting-value
  });
});

Các thuộc tính (Settings) quan trọng nhất

Sức mạnh của Slick nằm ở khả năng tùy biến. Dưới đây là bảng giải thích chi tiết các tham số bạn thường xuyên sử dụng:

Cấu hình Cơ bản

JavaScript

$('.your-class').slick({
  infinite: true,        // Lặp lại vô tận (true/false)
  slidesToShow: 3,       // Số lượng slide hiển thị trên màn hình
  slidesToScroll: 1,     // Số lượng slide trượt đi mỗi lần click
  autoplay: true,        // Tự động chạy
  autoplaySpeed: 2000,   // Tốc độ chạy (ms) -> 2000ms = 2s
  speed: 500,            // Tốc độ hiệu ứng trượt (ms)
  dots: true,            // Hiển thị dấu chấm điều hướng bên dưới
  arrows: true,          // Hiển thị mũi tên Next/Prev
});

Hiệu ứng Fade (Làm mờ thay vì trượt)

Nếu bạn làm slider cho banner chính (Hero Banner), hiệu ứng Fade thường sang trọng hơn.

JavaScript

$('.hero-slider').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  fade: true,           // Kích hoạt hiệu ứng Fade
  cssEase: 'linear'     // Kiểu chuyển động
});

Center Mode (Làm nổi bật slide giữa)

Chế độ này giúp slide ở giữa luôn nằm chính giữa màn hình, và lộ ra một phần của slide trước và sau. Rất đẹp cho slider danh sách sản phẩm hoặc feedback khách hàng.

JavaScript

$('.center-slider').slick({
  centerMode: true,
  centerPadding: '60px', // Khoảng cách lộ ra của 2 slide bên cạnh
  slidesToShow: 3,
});

Responsive: Tối ưu hóa cho Mobile & Tablet

Đây là phần quan trọng nhất để đảm bảo Google đánh giá cao website của bạn (Mobile-First Indexing). Bạn không thể để hiển thị 3 slide trên màn hình điện thoại bé xíu được.

Slick hỗ trợ thuộc tính responsive nhận vào một mảng các object:

JavaScript

$('.responsive-slider').slick({
  dots: true,
  infinite: false,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 4,
  responsive: [
    {
      breakpoint: 1024, // Áp dụng cho màn hình < 1024px (Tablet, Laptop nhỏ)
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600, // Áp dụng cho màn hình < 600px (Tablet nhỏ, Mobile lớn)
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480, // Áp dụng cho màn hình < 480px (Mobile)
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false // Tắt mũi tên trên mobile cho đỡ rối
      }
    }
  ]
});

Kỹ thuật Nâng cao Slick Slider (Advanced)

Syncing Sliders (Slider đồng bộ – Dùng cho trang chi tiết sản phẩm)

Bạn thường thấy trên Shopee hay Tiki: Một slider lớn hiển thị ảnh chính, và một slider nhỏ bên dưới hiển thị ảnh thumbnail. Khi click thumbnail, ảnh lớn thay đổi theo.

HTML:

HTML

<div class="slider-for">
  <div><img src="big1.jpg"></div>
  <div><img src="big2.jpg"></div>
</div>

<div class="slider-nav">
  <div><img src="thumb1.jpg"></div>
  <div><img src="thumb2.jpg"></div>
</div>

Javascript:

JavaScript

// Slider Lớn
$('.slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.slider-nav' // Đồng bộ với class .slider-nav
});

// Slider Nhỏ
$('.slider-nav').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.slider-for', // Đồng bộ với class .slider-for
  dots: true,
  centerMode: true,
  focusOnSelect: true // Click vào thumb nào thì active thumb đó
});

Lazy Loading (Tối ưu tốc độ tải trang)

Google rất ghét trang web tải chậm. Nếu bạn có 20 ảnh trong slider, việc tải hết 20 ảnh cùng lúc khi vào trang là thảm họa. Hãy dùng Lazy Load.

HTML (Thay đổi src thành data-lazy):

HTML

<div class="lazy-slider">
  <div><img data-lazy="img1.jpg" alt="Lazy load image"></div>
  <div><img data-lazy="img2.jpg" alt="Lazy load image"></div>
</div>

Javascript:

JavaScript

$('.lazy-slider').slick({
  lazyLoad: 'ondemand', // hoặc 'progressive'
  slidesToShow: 3,
  slidesToScroll: 1
});

ondemand: Chỉ tải ảnh khi người dùng lướt tới slide đó.
progressive: Tải ảnh nền ngầm sau khi trang đã load xong.

Custom Arrows (Tự thiết kế mũi tên)

Mũi tên mặc định của Slick đôi khi không hợp style của bạn. Bạn có thể dùng icon FontAwesome hoặc ảnh riêng.

JavaScript

$('.custom-arrows').slick({
  prevArrow: '<button type="button" class="slick-prev-custom"><i class="fa fa-angle-left"></i></button>',
  nextArrow: '<button type="button" class="slick-next-custom"><i class="fa fa-angle-right"></i></button>'
});

Sau đó bạn CSS cho class .slick-prev-custom và .slick-next-custom tùy ý.

Xem thêm:
Marquee HTML là gì? cú pháp, cách sử dụng và ví dụ minh họa trực quan
Closure Là Gì? Giải Mã Khái Niệm “Hack Não” Nhất Trong JavaScript (Hướng Dẫn Toàn Tập 2025)
EJS là gì? Giải mã Embedded JavaScript Template Engine cho Node.js

Tùy biến Giao diện với CSS (Styling)

Slick tạo ra khá nhiều class HTML khi chạy. Để tùy biến đẹp, bạn cần ghi đè (override) CSS.

CSS

/* Sửa lỗi hình ảnh bị vỡ hoặc kích thước không đều */
.slick-slide img {
    width: 100%;
    height: auto;
    object-fit: cover; /* Giữ tỷ lệ ảnh đẹp */
    display: block;
}

/* Khoảng cách giữa các slide (Gutter) */
/* Mẹo: Slick không có margin mặc định, ta dùng padding cho thẻ con */
.your-class .slick-slide {
    margin: 0 10px; /* Tạo khoảng cách 2 bên */
}

/* Tùy biến dấu chấm (Dots) */
.slick-dots li button:before {
    font-size: 12px; /* Kích thước chấm */
    color: #ff0000; /* Màu chấm */
    opacity: 0.5;
}
.slick-dots li.slick-active button:before {
    color: #ff0000;
    opacity: 1;
}

Xử lý các lỗi thường gặp (Troubleshooting)

Trong quá trình làm việc với Slick Slider, tôi đã gặp rất nhiều trường hợp lỗi. Dưới đây là cách khắc phục:

Lỗi 1: FOUC (Flash of Unstyled Content) – Vỡ giao diện khi chưa load xong JS

Hiện tượng: Khi load trang, bạn thấy các ảnh xếp dọc xấu xí trước khi nhảy thành slider. Cách fix: Ẩn slider bằng CSS và hiện lại khi JS đã chạy xong.

CSS

/* CSS */
.your-class {
    display: none;
}
.your-class.slick-initialized {
    display: block; /* Chỉ hiện khi class slick-initialized được thêm vào */
}

Lỗi 2: Slider bị méo hoặc không hiển thị trong Tab/Modal/Popup

Nguyên nhân: Khi container bị display: none, Slick không tính toán được chiều rộng. Cách fix: Sử dụng phương thức setPosition hoặc resize.

JavaScript

// Khi mở modal hoặc tab chứa slider
$('.tab-link').on('click', function() {
    $('.your-class').slick('setPosition');
});

Lỗi 3: Chiều cao các slide không bằng nhau

Cách fix: Sử dụng Flexbox cho các slide.

CSS

.slick-track {
    display: flex !important;
}
.slick-slide {
    height: auto;
    display: flex; /* Căn chỉnh nội dung bên trong */
    flex-direction: column;
}

Tổng kết & Lời khuyên

Slick Slider là một công cụ tuyệt vời, nhưng đừng lạm dụng nó.

Tại sao? Theo nghiên cứu UX, người dùng thường ít khi click vào các slide thứ 2, thứ 3. Hơn nữa, slider nặng có thể làm chậm điểm Core Web Vitals (đặc biệt là LCP – Largest Contentful Paint).

Lời khuyên để tối ưu khi dùng Slick:

Chỉ dùng 3-5 slide: Đừng nhồi nhét quá nhiều.
Tối ưu dung lượng ảnh: Nén ảnh trước khi up (dùng WebP càng tốt).
Luôn dùng Lazy Loading: Như hướng dẫn ở mục 7.2.
Mobile First: Ẩn bớt các thành phần thừa trên mobile, chỉ để lại thao tác vuốt.

Hy vọng bài viết này đã cung cấp cho bạn cái nhìn toàn diện và cách sử dụng Slick Slider hiệu quả nhất. Hãy copy các đoạn code trên và áp dụng ngay vào dự án của bạn!

5/5 - (1 bình chọn)

Công nghệ tương lai Lập trình/ Code

Portainer Là Gì? Toàn Tập Về Công Cụ Quản Trị Container Hàng Đầu (Hướng Dẫn Chi Tiết)

Sự bùng nổ của công nghệ Container hóa (Containerization) với đầu tàu là Docker

Xem thêm

23
Th3

Công nghệ tương lai Công cụ và hướng dẫn Lập trình/ Code

Helper Là Gì? Bí Quyết Viết Code “Sạch” Và Tối Ưu Trong Lập Trình

Trong thế giới lập trình và phát triển phần mềm, việc phải lặp đi

17
Th3

Digital Maketing Đồ Họa và Video Xu hướng

Des là gì? Giải mã ý nghĩa của Des trong Thiết kế, SEO, IT & Logistics

Bạn đang lướt mạng xã hội và thấy ai đó bình luận: “Dân Des

07
Th3

TASDIGITAL

Tài nguyên

Tài nguyên

Slick Slider là gì và Tại sao nên sử dụng?

Các tính năng nổi bật:

Hướng dẫn Cài đặt Slick Slider (Setup)

Cách 1: Sử dụng CDN (Khuyên dùng cho người mới)

Cách 2: Cài đặt qua NPM (Dành cho Dev sử dụng Webpack/Gulp)

Cấu trúc HTML chuẩn cho Slick Slider

Khởi tạo Slider (Initialization)

Các thuộc tính (Settings) quan trọng nhất

Cấu hình Cơ bản

Hiệu ứng Fade (Làm mờ thay vì trượt)

Center Mode (Làm nổi bật slide giữa)

Responsive: Tối ưu hóa cho Mobile & Tablet

Kỹ thuật Nâng cao Slick Slider (Advanced)

Syncing Sliders (Slider đồng bộ – Dùng cho trang chi tiết sản phẩm)

Lazy Loading (Tối ưu tốc độ tải trang)

Custom Arrows (Tự thiết kế mũi tên)

Marquee HTML là gì? cú pháp, cách sử dụng và ví dụ minh họa trực quan

Closure Là Gì? Giải Mã Khái Niệm “Hack Não” Nhất Trong JavaScript (Hướng Dẫn Toàn Tập 2025)

EJS là gì? Giải mã Embedded JavaScript Template Engine cho Node.js

Tùy biến Giao diện với CSS (Styling)

Xử lý các lỗi thường gặp (Troubleshooting)

Lỗi 1: FOUC (Flash of Unstyled Content) – Vỡ giao diện khi chưa load xong JS

Lỗi 2: Slider bị méo hoặc không hiển thị trong Tab/Modal/Popup

Lỗi 3: Chiều cao các slide không bằng nhau

Tổng kết & Lời khuyên

Văn Tân ❇️

Portainer Là Gì? Toàn Tập Về Công Cụ Quản Trị Container Hàng Đầu (Hướng Dẫn Chi Tiết)

Helper Là Gì? Bí Quyết Viết Code “Sạch” Và Tối Ưu Trong Lập Trình

Des là gì? Giải mã ý nghĩa của Des trong Thiết kế, SEO, IT & Logistics

Để lại một bình luận Hủy

Hơn 5 năm phục vụ 1000+ khách hàng

TASDIGITAL.net

THÔNG TIN CHUNG

TÀI NGUYÊN SỐ

Lập trình/ Code

Slick Slider: Code Mẫu & Hướng Dẫn Tùy Biến Slider Cho Website Chuẩn SEO

Tài nguyên

Tài nguyên

Slick Slider là gì và Tại sao nên sử dụng?

Các tính năng nổi bật:

Hướng dẫn Cài đặt Slick Slider (Setup)

Cách 1: Sử dụng CDN (Khuyên dùng cho người mới)

Cách 2: Cài đặt qua NPM (Dành cho Dev sử dụng Webpack/Gulp)

Cấu trúc HTML chuẩn cho Slick Slider

Khởi tạo Slider (Initialization)

Các thuộc tính (Settings) quan trọng nhất

Cấu hình Cơ bản

Hiệu ứng Fade (Làm mờ thay vì trượt)

Center Mode (Làm nổi bật slide giữa)

Responsive: Tối ưu hóa cho Mobile & Tablet

Kỹ thuật Nâng cao Slick Slider (Advanced)

Syncing Sliders (Slider đồng bộ – Dùng cho trang chi tiết sản phẩm)

Lazy Loading (Tối ưu tốc độ tải trang)

Custom Arrows (Tự thiết kế mũi tên)

Marquee HTML là gì? cú pháp, cách sử dụng và ví dụ minh họa trực quan

Closure Là Gì? Giải Mã Khái Niệm “Hack Não” Nhất Trong JavaScript (Hướng Dẫn Toàn Tập 2025)

EJS là gì? Giải mã Embedded JavaScript Template Engine cho Node.js

Tùy biến Giao diện với CSS (Styling)

Xử lý các lỗi thường gặp (Troubleshooting)

Lỗi 1: FOUC (Flash of Unstyled Content) – Vỡ giao diện khi chưa load xong JS

Lỗi 2: Slider bị méo hoặc không hiển thị trong Tab/Modal/Popup

Lỗi 3: Chiều cao các slide không bằng nhau

Tổng kết & Lời khuyên

Văn Tân ❇️

Portainer Là Gì? Toàn Tập Về Công Cụ Quản Trị Container Hàng Đầu (Hướng Dẫn Chi Tiết)

Helper Là Gì? Bí Quyết Viết Code “Sạch” Và Tối Ưu Trong Lập Trình

Des là gì? Giải mã ý nghĩa của Des trong Thiết kế, SEO, IT & Logistics

Để lại một bình luận Hủy

Hơn 5 năm phục vụ 1000+ khách hàng

TASDIGITAL.net

THÔNG TIN CHUNG