Photo: NOAA PMEL Carbon Program
Download
.gallery-card');
var cardWidth = galleryCards[0]?.offsetWidth || 1280;
var activeIndex = 0;
/**
*
* @param {number} index
*/
function updateActiveCard(index) {
galleryCards.forEach((card, i) => {
if (i === index) {
card.classList.add('active');
card.scrollIntoView({
behavior: "smooth",
inline: "center"
});
} else {
card.classList.remove('active');
}
});
}
/**
*
* @param {string} direction
*/
function moveGallery(direction) {
const totalCards = galleryCards.length;
if (direction === 'left' && activeIndex > 0) {
activeIndex--;
} else if (direction === 'right' && activeIndex < totalCards - 1) {
activeIndex++;
}
updateActiveCard(activeIndex);
}
// Event listeners for left and right arrows
leftArrow.addEventListener('click', function () {
moveGallery('left');
});
rightArrow.addEventListener('click', function () {
moveGallery('right');
});
// Event listener for scrolling (optional)
logoGallery.addEventListener('scroll', function () {
const visibleIndex = Math.round(logoGallery.scrollLeft / cardWidth);
if (visibleIndex !== activeIndex) {
activeIndex = visibleIndex;
updateActiveCard(activeIndex);
}
});
// Handle clicks directly on cards
galleryCards.forEach((card, index) => {
card.addEventListener('click', function () {
activeIndex = index;
updateActiveCard(activeIndex);
});
});
// Initialize the first active card
updateActiveCard(activeIndex);
});
