Skip to main content

Yêu Cầu Chỉnh Sửa: Tự Động Cuộn Slide Chuyên Mục BigFan

Ngày cập nhật: 23/06/2026
File ảnh gốc: z7963993497911_4718be5af5c7a3907f0e7fb04a630a18.jpg

Vấn Đề Hiện Tại​

Chuyên mục BigFan trên trang chủ (Home) chứa các thẻ tin tức hoạt động tự động (khách hàng trúng thưởng, nhận voucher...). Tuy nhiên:

  • Slider/Carousel của section này chưa tự động cuộn (Auto-scroll / Auto-play).
  • Người dùng bắt buộc phải dùng tay vuốt thủ công thì slide mới chuyển động. Điều này làm giảm tính sinh động của trang chủ và khách hàng dễ bỏ qua các thông tin cập nhật trúng thưởng này.

Section BigFan trên Trang chủ

Yêu Cầu Thay Đổi & Đặc Tả Kỹ Thuật​

1. Kích hoạt tính năng Tự động cuộn (Auto-play / Auto-scroll)​

  • Cấu hình Slider của section BigFan tự động chuyển slide sau mỗi 3 đến 5 giây (khuyến nghị: 4 giây).
  • Hiệu ứng chuyển cảnh: Sử dụng hiệu ứng chuyển đổi mượt mà (Smooth transition / Ease-in-out), tránh bị giật hoặc chuyển đổi quá đột ngột.

2. Cuộn lặp vô tận (Infinite Looping)​

  • Khi slide chạy đến phần tử cuối cùng trong danh sách, nó phải chuyển tiếp sang phần tử đầu tiên một cách mượt mà và liên tục (Infinite Loop), không được dừng lại hoặc giật ngược về đầu.

3. Tạm dừng khi tương tác (Pause on Touch / Interaction)​

  • Cơ chế Pause: Khi người dùng chạm ngón tay vào slide hoặc đang giữ vuốt (Swipe), hệ thống phải tạm dừng (Pause) bộ đếm thời gian tự động cuộn để tránh việc slide tự chuyển khi người dùng đang đọc thông tin hoặc chuẩn bị click vào card.
  • Cơ chế Resume: Sau khi người dùng thả tay ra (sau khoảng 2-3 giây không tương tác), slide sẽ tiếp tục tự động cuộn từ vị trí hiện tại.

4. Đồng bộ hóa với Indicator (nếu có)​

  • Đảm bảo các dấu chấm tròn chỉ vị trí slide (Pagination Dots / Indicators) phải sáng lên tương ứng và đồng bộ theo thời gian thực khi slide tự động chuyển.

Gợi Ý Giải Pháp Kỹ Thuật (React Native / Expo)​

Tùy vào thư viện Carousel đang sử dụng trong dự án, dưới đây là cách cấu hình nhanh:

Chỉ cần bật thuộc tính autoPlay và cấu hình autoPlayInterval:

import Carousel from 'react-native-reanimated-carousel';

<Carousel
    loop={true}
    width={PAGE_WIDTH}
    height={200}
    autoPlay={true}
    autoPlayInterval={4000} // Tự động cuộn sau mỗi 4 giây
    data={bigFanData}
    scrollAnimationDuration={1000} // Thời gian chuyển động là 1 giây cho mượt
    renderItem={({ item }) => <BigFanCard item={item} />}
/>

Phương án B: Nếu sử dụng FlatList thủ công kèm Timer​

Sử dụng useRef kết hợp với setInterval để tự động thay đổi index:

const flatListRef = useRef(null);
const [currentIndex, setCurrentIndex] = useState(0);

useEffect(() => {
  const interval = setInterval(() => {
    let nextIndex = currentIndex + 1;
    if (nextIndex >= bigFanData.length) {
      nextIndex = 0; // Lặp lại vô tận
    }
    setCurrentIndex(nextIndex);
    flatListRef.current?.scrollToIndex({
      index: nextIndex,
      animated: true,
    });
  }, 4000); // 4 giây

  return () => clearInterval(interval);
}, [currentIndex]);