Share Tạo slideshow nội dung chuyên nghiệp với thư viện slick

[filiallion]

Language

Tiếng Việt

Slideshow là một thành phần thể hiện nội dung được nhiều website sử dụng, nhất là các website muốn truyền tải thông tin khuyến mãi tới khách hàng. Thông thường, các slideshow đều trình diễn các hình ảnh, video với nội dung hấp dẫn nhưng đôi lúc các slideshow chỉ thể hiện các nội dung văn bản hay thậm chí là một khối nội dung được trình bày phức tạp. Hiện nay có rất nhiều thư viện JavaScript hỗ trợ các bạn xây dựng slideshow và một trong số đó phải kể đến đó là slick.

Thư viện slick được viết bằng JavaScript dựa trên nền tảng jQuery nên các bạn cần tích hợp jQuery vào website trước khi sử dụng slick. Các bạn có thể tải thư viện slick tại địa chỉ https://github.com/kenwheeler/slick và tích hợp vào website như sau:

<link href="path/to/slick.css" rel="stylesheet">
<script src="path/to/jquery.min.js"></script>
<script src="path/to/slick.min.js"></script>

Các bạn tạo thành phần slideshow như sau:

<div class="slick">
    <div>Content 1</div>
    <div>Content 2</div>
    <div>Content 3</div>
</div>

Bây giờ, các bạn cài đặt thư viện slick như sau:

$(function() {
    $('.slick').slick();
});

Các bạn có thể tìm hiểu thêm về thư viện slick tại địa chỉ https://kenwheeler.github.io/slick.