Giới Thiệu

Chào mừng bạn đến với bài viết!🥰 Hôm nay, tôi sẽ hướng dẫn bạn cách xây dựng một carousel vô hạn trong React bằng cách sử dụng một custom hook và một số CSS cơ bản. Đây là một dự án nhỏ nhưng rất hữu ích, giúp bạn hiểu rõ hơn về cách hoạt động của các thư viện và cách tạo ra một mini-library riêng cho mình.

Tại Sao Phải Là Một Carousel Khác❓

Carousel hiện diện khắp nơi: từ các cửa hàng trực tuyến đến các trang đích, từ portfolio đến các ứng dụng web. Thay vì dựa vào các thư viện lớn, đôi khi bạn chỉ cần một slider đơn giản. Việc tự tay xây dựng carousel sẽ giúp bạn kiểm soát hoàn toàn và hiểu rõ cách thức hoạt động của chúng.

Carousel Vô Hạn Là Gì❓

Một carousel truyền thống có điểm bắt đầu và kết thúc. Khi bạn đến bức ảnh cuối cùng và nhấn "tiếp theo", nó sẽ dừng lại hoặc quay lại một cách đột ngột. Với carousel vô hạn, chúng ta tạo ra ảo giác rằng danh sách không bao giờ kết thúc. Làm thế nào để thực hiện điều này?

Cách đơn giản là sao chép một vài slide và thêm chúng vào đầu và cuối. Khi bạn di chuyển quá xa bên trái hoặc bên phải, danh sách sẽ được định vị lại mà người dùng không nhận ra. Điều này mang lại cho người dùng cảm giác họ có thể cuộn một cách vô hạn.

Cấu Trúc Dự Án

Tôi đã chia logic thành hai phần:

Component InfiniteCarousel ➤ xử lý giao diện (hình ảnh, tiêu đề, nút điều hướng).
Hook useCarousel ➤ xử lý logic (sao chép, chỉ số, chuyển tiếp, tự động cuộn, thay đổi kích thước).

Điều này giúp carousel có thể tái sử dụng: bạn có thể thêm hook vào bất kỳ dự án React nào và sử dụng với bất kỳ loại nội dung nào.

Hook useCarousel

Hook này chấp nhận một số tùy chọn cấu hình:

Copy

useCarousel({
  visibleSlides: 4,           // số slide hiển thị cùng lúc
  gap: 32,                    // khoảng cách giữa các slide
  autoSlideInterval: 3000,    // thời gian tự động cuộn (ms)
});

Cách Hoạt Động

Theo dõi chỉ số: ➤ theo dõi vị trí hiện tại bằng ref.
Chuyển tiếp: ➤ di chuyển carousel bằng cách sử dụng translateX.
Đặt lại vô hình: ➤ khi bạn vượt qua các cạnh, nó sẽ tắt chuyển tiếp, ngay lập tức định vị lại, sau đó tiếp tục bình thường.
Tự động cuộn: ➤ di chuyển slide tự động, tạm dừng khi di chuột qua.
Xử lý thay đổi kích thước: ➤ tính toán lại chiều rộng của các slide khi kích thước cửa sổ thay đổi.

Component InfiniteCarousel

Giao diện rất đơn giản:

ul cho danh sách các slide,
li cho từng hình ảnh,
hai nút để điều hướng bằng tay.

Thiết Kế Responsive

Với một số media queries, carousel có thể thích ứng với các kích thước màn hình khác nhau:

Trên di động → 1–2 slide hiển thị,
Trên máy tính bảng → 3 slide,
Trên máy tính để bàn → 4 slide.

Copy

@media screen and (min-width: 500px) {
  .li-right-tea {
    width: calc(50% - 32px / 2);
  }
}

@media screen and (min-width: 900px) {
  .li-right-tea {
    width: calc(33.33% - 64px / 3);
  }
}

@media screen and (min-width: 1200px) {
  .li-right-tea {
    width: calc(25% - 96px / 4);
  }
}

Sơ Đồ Logic

Giả sử chúng ta có 8 slide gốc: A B C D E F G H và chúng ta muốn hiển thị 4 slide một lần ➤ điều này có nghĩa là chúng ta cần sao chép 4 slide ở đầu và 4 slide ở cuối.

Vị Trí Chính:

Bắt đầu (index = 4) ➤ căn chỉnh trên slide thật đầu tiên (A)
Hiển thị: [ A | B | C | D ]
Đi tới phải (next):
Bạn đến index 11 (H).
Nhấn tiếp theo ➤ index 12 (A clone).
➤ Khi kết thúc chuyển tiếp, nó ngay lập tức đặt lại về index 4 (A thật).
Đi tới trái (prev):
Bạn đến index 3 (H clone).
➤ Khi kết thúc chuyển tiếp, nó ngay lập tức đặt lại về index 11 (H thật).

Người dùng không bao giờ thấy sự nhảy. Ảo giác về sự vô hạn được bảo tồn.

Chức Năng Cuối Cùng

Điều hướng bằng tay với nút bấm,
Tự động cuộn với khoảng thời gian tùy chỉnh,
Tạm dừng khi di chuột qua,
Đặt lại vô hình cho hiệu ứng vô hạn,
Thiết kế responsive (media queries + tính toán lại kích thước),
Có thể tái sử dụng (hook hoạt động với bất kỳ loại nội dung nào, không chỉ hình ảnh).

Kết Luận❤️

Bạn đã có một carousel vô hạn hoàn chỉnh trong React, được xây dựng từ đầu, không cần thư viện bên ngoài, và bạn có toàn quyền kiểm soát hành vi của nó.🥰 Tất nhiên, bạn có thể cải tiến thêm với các chỉ số (dots) để theo dõi tiến độ, các hiệu ứng, và các chức năng khác! Tôi nghĩ việc xây dựng các mini-library trong React là điều rất đáng giá. Bạn không chỉ học cách mọi thứ hoạt động mà còn có tự do để mở rộng và tùy chỉnh theo cách mình thích.

Hy vọng bài viết này giúp ích cho bạn!🥰 Hãy cho tôi biết trong phần bình luận nếu bạn có câu hỏi hoặc nếu bài viết này hữu ích với bạn.
Chúc bạn lập trình vui vẻ!

Xây Dựng Carousel Vô Hạn Trong React Với Custom Hook