Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Carousel Là Gì? 28 Thư Viện CSS Javascript Giúp Bạn Tạo Carousel Cho Website

Carousel Là Gì? 28 Thư Viện CSS Javascript Giúp Bạn Tạo Carousel Cho Website


Ngày 23 Tháng 6 Năm 2020

Bài viết hôm nay chúng ta sẽ đi vào tìm hiểu những thư viện carousel dành cho việc thiết kế và phát triển web nhé!

Carousel Là Gì?

Carousel là một thanh trượt giúp bạn dễ dàng hiển thị hình ảnh theo một vòng lặp khép kín nhằm làm nổi bật sản phẩm cũng như thu hút sự chú ý đối với người dùng. Ngoài ra nó cũng góp phần tiết kiệm diện tích cho trang web của bạn. Để xây dựng một Carousel cơ bản thì không quá khó nhưng với sự phát triển web ngày nay thì chúng ta cần phải tạo ra những carousel có tính thẩm mỹ cao và tích hợp được thêm nhiều tính năng hơn để nâng cao trải nghiệm người dùng. Để hiểu rõ hơn bạn xem hình ảnh minh họa bên dưới nhé!

Ví Dụ Minh Họa Carousel

Owl Carousel 2 là một thư viện mã nguồn mở giúp bạn xây dựng carousel một cách dễ dàng và có tính thẩm mỹ cao. Với hơn 60 dạng carousel khác nhau, hỗ trợ tính năng touch and drop trên mobile để tăng trải nghiệm người dùng, responsive trên nhiều màn hình thiết bị khác nhau, thư viện được chia thành nhiều mô đun nhỏ giúp giảm các plugin không cần thiết khi sử dụng trong dự án. Điểm mình cảm thấy thích ở thư viện này là nó có nhiều ví dụ chi tiết cho từng chức năng giúp bạn dễ dàng thiết lập cũng như lựa chọn xây dựng carousel phù hợp cho dự án web của mình như là chức năng autoplay, có thể sử dụng với video, tùy chỉnh hiệu ứng chuyển động... Bạn có thể tham khảo thêm trong trang demo của nó nhé!

Owl Carousel 2

Swiper là một thư viện mã nguồn mở với hơn 23k sao đánh giá trên Github. Nó giúp bạn xây dựng slider một cách nhanh chóng với thiết kế hiện đại cho các website, ứng dụng điện thoại hay web app mobile... Ngoài ra nó có một số tính năng hữu ích khác như là có hiệu ứng chuyển động đa dạng, API phong phú, có thể sử dụng CSS thuần để xác định lại hệ thống lưới trong Swiper, sử dụng lazy loading image... Điểm mình thấy ở thư viện này là nó luôn được cập nhật thường xuyên để đáp ứng nhu cầu ngày càng cao của lập trình viên và phiên bản mới nhất hiện tại là Swiper 5.x. Nếu bạn muốn sử dụng trên các trình duyệt cũ thì có thể dùng phiên bản Swiper 2.x nhé!

Swiper

Slick là một thư viện nhỏ gọn với hiệu suất mạnh mẽ giúp bạn xây dựng carousel, slider một cách dễ dàng. Ngoài thiết lập bằng javascript thì bạn cũng có thể sử dụng thuộc tính data-slick cho các đối tượng trong HTML mà mình muốn tạo carousel (tính năng này chỉ dành cho phiên bản 1.5 trở lên nhé). Ngoài ra nó cũng có các thuộc tính để bạn dễ dàng tinh chỉnh trong quá trình tạo carousel cho trang web như là tính năng lọc, sử dụng sự kiện để thêm hay xóa phần tử trong carousel, hiển thị một hay nhiều phần tử, chế độ autoplay...

Slick

Flickity v2.2 là một thư viện giúp bạn dễ dàng tạo carousel, slider cho trang web của mình thông qua cách thiệt lập bằng Javascript thuần, Jquery hay sử dụng thuộc tính cho đối tượng HTML. Bạn cũng có thể thiết lập style cho carousel bằng cách thay đối các thuộc tính trong file flickity.min.css nhé. Cũng như các thư viện khác thì nó có các thuộc tính giúp bạn dễ dàng tinh chỉnh carousel như là cho phép kéo và thả, nhóm các phần tử thành những nhóm khác nhau, chể độ hiển thị toàn màn hình khi người dùng click chuột vào phần tử...

Flickity v2.2

Tiny slider là một thư viện được lấy cảm hứng từ Owl Carousel giúp bạn xây dựng carousel nhỏ gọn nhưng vẫn đảm bảo đầy đủ tính năng cũng như tính thẩm cao cho carousel, slider trong trang web. Nó có nhiều tính năng và thuộc tính giúp bạn dễ dàng tinh chỉnh như là touch and drag, chức năng lazyload, hiển thị carousel theo chiều dọc, chọn vị trí phần tử bắt đầu trong carousel... Bạn có thể tham khảo ví dụ về từng tính năng ở trang demo của nó nhé!

Tiny slider

Lory là một thư viện được viết bằng Javascript thuần giúp bạn tạo carousel đơn giản với nhiều tùy chọn có thể thiết lập trong trang web. Ngoài các cách thiết lập thông thường thì bạn có thể dùng CDN để sử dụng trực tiếp trong trang HTML. Nó cũng có thể sử dụng với webpack, babel hay eslint trong quá trình phát triển. Tất cả các ví dụ về cách thiết lập, sử dụng thuộc tính, tính năng để tinh chỉnh carousel... đều có ở trong trang demo của nó nhé.

Lory

Siema là một thư viện nhỏ gọn chỉ khoảng 3kb(sau khi nén) giúp bạn tạo carousel đơn giản nhưng vẫn đảm bảo đầy đủ tính năng như là chọn hiệu ứng chuyển động, thiết lập số phần tử trên mỗi trang, cho phép tính năng drag... Và nó chỉ hỗ trợ những trình duyệt phiên bản hiện đại thôi nhé. Ngoài ra thư viện này cũng hỗ trợ tạo carousel cho những framework front end phổ biến hiện nay như là Angular, React, Vue... (Cái này bạn xem trong phần Other implementations nhé).

Siema

JQuery lightSlider là một thư viện mã nguồn mở với kích thước nhỏ gọn giúp bạn tạo carousel, slider kết hợp với thanh điều hướng giúp người dùng dễ dàng đi đến các phần tử trong carousel một cách dễ dàng. Một số điểm mạnh của thư viện này là đáp ứng hiển thị trên nhiều màn hình thiết bị khác nhau, hỗ trợ chức năng vuốt trên điện thoại, có thể điều hướng carousel thông qua bàn phím, hỗ trợ nhiều loại nội dung như hình ảnh, video, google map...

JQuery lightSlider

Simple-slider là một thư viện được xây dựng bằng Javascript với kích thước rất nhỏ chỉ khoảng 1.2kb(sau khi nén). Nó có các tài liệu mở rộng cũng như các ví dụ chi tiết về từng chức năng giúp bạn dễ dàng tùy chỉnh carousel để phù hợp với mục đích của trang web. Ngoài ra nó cũng sử dụng API để thiết lập các phương thức và thuộc tính giúp bạn kiểm soát carousel một cách tốt hơn, ví dụ như là xác định khoảng thời gian delay, xác định thành phần con được sử dụng trong carousel, thiết lập giá trị CSS sử dụng(mặc định là % nhé)...

Simple-slider

Embla Carousel là một thư viện nhỏ gọn được viết bằng CSS và Javascript giúp bạn nhanh chóng tạo carousel, slider cho trang web của mình. Do không sử dụng thư viện bổ sung nào nên độ tối ưu hiệu suất cho trang web cũng rất cao. Ngoài ra nó cũng có một số thuộc tính giúp bạn dễ dàng tinh chỉnh hơn như là cho phép sử dụng drag (kéo hoặc vuốt), xác định lặp lại các phần tử trong carousel, xác định vị trí của các phần tử trong carousel...

Embla Carousel

Slider Pro là một thư viện mã nguồn mở được xây dựng bằng Jquery giúp bạn tạo carousel, slider kết hợp với thanh điều hướng(navigation) một cách dễ dàng. Nó có khá nhiều bố cục được xây dựng sẵn giúp bạn dễ dàng áp dụng vào trang web của mình. Ngoài ra thì Slider Pro còn hiển thị được trên nhiều màn hình thiết bị khác nhau, sử dụng chạm vuốt cho carousel trên thiết bị điện thoại, chế độ toàn màn hình... Bạn có thể xem đầy đủ hướng dẫn cách thiết lập, sử dụng và tùy chỉnh carousel, slider ở phần Detailed usage instructions trong trang Github của nó nhé.

Slider Pro

Glider.js là một thư viện mã nguồn mở được lấy cảm hứng từ slick.js, nó hướng đến mục tiêu là tạo các carousel, slider nhẹ, gọn tương tác nhanh và không sử dụng thư viện bổ sung nào. Nó có kích thước chỉ khoảng 2.8kb(sau khi nén) và thời gian thực thi để tạo carousel chỉ mất khoảng 25s. Ngoài ra nó cũng có một số điểm mạnh khác như là dễ dàng mở rộng, tùy chỉnh, đáp ứng hiển thị trên nhiều thiết bị, hỗ trợ flexbox, sử dụng bàn phím để tương tác với carousel, slider... Bạn có thể tham khảo thêm ở trang demo của nó nhé!

Glider.js

Timeline.js là một thư viện mã nguồn mở giúp bạn tạo các carousel, slider hiển thị các sự kiện thời gian một cách nhanh chóng và dễ dàng. Nó có một số thuộc tính giúp bạn dễ dàng tinh chỉnh carousel, slider như là autoplay, chọn chế độ hiển thị ngang hoặc dọc, dừng timeline khi người dùng hover...

Timeline.js

ItemSlide.js là một thư viện mã nguồn xây dựng bằng javascript giúp bạn tạo các carousel, slider vuốt và cuộn một cách dễ dàng cho trang web. Nó chủ yếu tập trung vào phần hiển thị trên các thiết bi điện thoại và máy tính bảng. Với kích thước chỉ khoảng 10kb nhưng nó vẫn đảm bảo được nhiều tính năng tùy chỉnh cho carousel, slider như là xác định độ nhạy khi người dùng vuốt các phần tử, thời gian hiển thị các phần tử trong carousel, không cho phép người dùng click vào phần tử... Cái này bạn có thể xem thêm ở phần Docs để tham khảo nhé!

ItemSlide.js

Turntable.js là một thư viện được xây dựng bằng Jquery giúp bạn tạo carousel theo một cách hơi khác là hiển thị dưới dạng 3D thông qua những hình ảnh chi tiết về các bề mặt của sản phẩm và được điều chỉnh bằng con trỏ chuột của người dùng (Cái này bạn xem ví dụ trong trang demo để hiểu rõ hơn nhé). Nó là mã nguồn mở nên bạn có thể sử dụng cho bất kỳ loại dự án web nào nhé.

Turntable.js

Một số thư viện slider, carousel dành cho VueJS

vue-awesome-swiper
Vue Carousel
vue-agile
vue-concise-slider
 Vue Carousel 3D

Một số thư viện slider, carousel dành cho ReactJS

REACT IMAGE GALLERY
React Responsive Carousel
Pure React Carousel
REACTAWESOME SLIDER
React slider

Một số thư viện slider, carousel Javascript khác

Glide
Skippr
FSVS

Ngoài ra bạn có thể tham khảo thêm các ví dụ về carousel và slider ở đường dẫn dưới đây nhé!

Ví dụ về Carousel: Ví Dụ Về Component Carousel

Ví dụ về Slider: Ví Dụ Về Slider

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những thư viện carousel, slider hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!