ge-aerospace/shopdb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix carousel CSS and add debug logging

Browse Source 
- Fixed carousel container height calculation
- Only non-active items are absolutely positioned
- Added console logging to debug carousel rotation
- Active item stays relative to maintain container height
This commit is contained in:
cproudlock
2025-11-18 09:12:17 -05:00
parent ea3442c9db
commit 7ef6c834d5
1 changed files with 25 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
shopfloor-dashboard/index.html
View File

@@ -387,20 +387,25 @@
.upcoming-carousel-container {
position: relative;
overflow: hidden;
min-height: 200px;
width: 100%;
}
.upcoming-carousel-wrapper {
position: relative;
width: 100%;
min-height: 200px;
}
.event-card.upcoming.carousel-item {
position: absolute;
width: 100%;
transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out;
margin-bottom: 0;
}
.event-card.upcoming.carousel-item:not(.active) {
position: absolute;
top: 0;
left: 0;
transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out;
}
.event-card.upcoming.carousel-item.active {
@@ -913,11 +918,14 @@
// Start the upcoming events carousel
function startUpcomingCarousel() {
console.log(`Carousel: Starting carousel with ${upcomingEvents.length} events`);
// Clear any existing interval
stopUpcomingCarousel();
// Start new interval (5 seconds)
upcomingCarouselInterval = setInterval(rotateUpcomingEvent, 5000);
console.log('Carousel: Interval set for 5 seconds');
}
// Stop the upcoming events carousel
@@ -930,13 +938,24 @@
// Rotate to next upcoming event
function rotateUpcomingEvent() {
if (upcomingEvents.length <= 1) return;
if (upcomingEvents.length <= 1) {
console.log('Carousel: Not enough events to rotate');
return;
}
const carousel = document.getElementById('upcomingCarousel');
if (!carousel) return;
if (!carousel) {
console.log('Carousel: Carousel element not found');
return;
}
const items = carousel.querySelectorAll('.carousel-item');
if (items.length === 0) return;
if (items.length === 0) {
console.log('Carousel: No carousel items found');
return;
}
console.log(`Carousel: Rotating from index ${currentUpcomingIndex} to ${(currentUpcomingIndex + 1) % upcomingEvents.length} (${items.length} total items)`);
const currentItem = items[currentUpcomingIndex];
const nextIndex = (currentUpcomingIndex + 1) % upcomingEvents.length;