up

img.html

@@ -117,59 +117,58 @@
 </body>
 <script>
     function startCarousel() {
-        const itemBigs = document.querySelectorAll('.item-big'); // Get all item-big groups
-        let currentItemBigIndex = 0; // Start with the first item-big
+        const itemBigs = document.querySelectorAll('.item-big');
+        const staggerDelay = 120; // Độ trễ tính bằng mili giây giữa mỗi itemBig
 
-        // Hàm để thay đổi từng item trong item-big
-        function changeItemBig(index) {
-            const itemBig = itemBigs[index]; // Get the current item-big
-            const items = itemBig.querySelectorAll('.item');
-            let currentIndex = 0; // Start with the first item in the item-big group
-
-            // Initialize the first item as active
-            items.forEach(item => item.classList.remove('active'));
-
-            items[currentIndex].classList.add('active');
-
-            // Chuyển sang item tiếp theo sau mỗi khoảng thời gian
+        // Hàm để bắt đầu hoạt hình của một itemBig cụ thể
+        function animateItemBig(itemBig, delay) {
             setTimeout(() => {
-                // Thêm class 'previous' cho item hiện tại
-                const currentItem = items[currentIndex];
-                currentItem.classList.add('previous'); // Thêm class previous
+                const items = [...itemBig.querySelectorAll('.item')];
+                let activeItem = itemBig.querySelector('.item.active');
+                if (!activeItem && items.length > 0) {
+                    activeItem = items[0];
+                    activeItem.classList.add('active');
+                }
 
-                // Chuyển sang item tiếp theo
-                currentIndex = (currentIndex + 1) % items.length; // Move to the next item
-                const nextItem = items[currentIndex];
-                nextItem.classList.add('active'); // Thêm class active cho item tiếp theo
+                if (!activeItem) return; // Xử lý itemBig trống
 
-                // Sau khi chuyển đổi xong, xóa class 'previous' khỏi item trước đó
-                currentItem.addEventListener(
-                    'transitionend',
-                    () => {
-                        currentItem.classList.remove('previous');
-                    },
-                    { once: true }
-                );
+                const activeItemIndex = items.indexOf(activeItem);
+                const nextItemIndex = (activeItemIndex + 1) % items.length;
 
-                // Sau khi chuyển đổi hết item của một item-big, chuyển sang item-big tiếp theo
-                setTimeout(() => {
-                    currentItemBigIndex = (currentItemBigIndex + 1) % itemBigs.length; // Chuyển qua nhóm tiếp theo
-                    if (currentItemBigIndex === 0) {
-                        // Nếu đã duyệt hết tất cả các item-big, quay lại nhóm đầu tiên
-                        startCarousel();
-                    } else {
-                        changeItemBig(currentItemBigIndex); // Tiến hành chuyển sang nhóm item-big tiếp theo
-                    }
-                }, 100); // Thời gian delay trước khi chuyển sang item-big khác
-
-            }, 500); // Mỗi item sẽ chuyển mỗi 4 giây
+                if (nextItemIndex !== activeItemIndex) {
+                    const nextItem = items[nextItemIndex];
+                    activeItem.classList.remove('active');
+                    activeItem.classList.add('previous');
+                    nextItem.classList.add('active');
+                    activeItem.addEventListener('transitionend', function handler() {
+                        this.classList.remove('previous');
+                        this.removeEventListener('transitionend', handler);
+                    }, { once: true });
+                }
+            }, delay);
         }
 
-        // Bắt đầu với item-big đầu tiên
-        changeItemBig(currentItemBigIndex);
+
+        // Bắt đầu hoạt hình với độ trễ xen kẽ.
+        itemBigs.forEach((itemBig, index) => {
+            animateItemBig(itemBig, index * staggerDelay);
+        });
+
+        // Hàm để xử lý chuyển đổi sang nhóm itemBig tiếp theo.
+        function moveToNextSet() {
+            setTimeout(() => {
+                // Logic để chuyển sang nhóm itemBig tiếp theo. Điều này có thể liên quan đến logic phức tạp hơn tùy thuộc vào cấu trúc của bạn
+                // Để đơn giản, tôi chỉ lặp lại tất cả các itemBig một lần nữa. Bạn cần điều chỉnh điều này.
+                itemBigs.forEach((itemBig, index) => {
+                    animateItemBig(itemBig, index * staggerDelay);
+                });
+            }, 2000); // độ trễ 2 giây trước khi chuyển sang nhóm tiếp theo
+        }
+
+        moveToNextSet();
+
     }
 
-    // Bắt đầu chạy carousel
     startCarousel();
 
 </script>