横向时间线滑块：点击箭头切换日期功能开发需求

Hey Marco, let's get those timeline arrows working exactly like the date clicks—so they jump straight to the next/previous date instead of just scrolling the timeline. Here's how to tie it all together using your existing code, no need to rewrite your date-switching logic!

First, we'll reuse the same activation logic you already have for date clicks, so everything stays consistent. Let's break this down step by step:

1. Cache your date elements for easy access #

First, let's grab all your timeline date elements and store them in an array—this makes it simple to find the active date and its neighbors:

const dateElements = Array.from(document.querySelectorAll('.timeline-date'));

2. Refactor your date-click logic into a reusable function #

If your current date-click code is inline (directly in the event listener), pull it out into a separate function. This way both date clicks and arrow clicks can use the same logic:

// Reusable function to activate a date (replace with your actual existing logic!)
function activateTargetDate(dateElement) {
  // Remove active state from all dates
  dateElements.forEach(el => el.classList.remove('active'));
  // Mark the target date as active
  dateElement.classList.add('active');
  // Load the corresponding content for this date (your existing content logic here)
  loadDateContent(dateElement.dataset.date);
}

// Update your existing date click listeners to use this function
dateElements.forEach(date => {
  date.addEventListener('click', () => {
    activateTargetDate(date);
    // Optional: Smooth scroll to center the active date
    date.scrollIntoView({ behavior: 'smooth', inline: 'center' });
  });
});

3. Update the right arrow click handler #

Instead of just scrolling, we'll find the current active date, grab its next sibling, and trigger our reusable activation function:

// Your existing right arrow click listener—replace the scroll logic with this
document.querySelector('.right-arrow').addEventListener('click', () => {
  const activeDate = document.querySelector('.timeline-date.active');
  if (!activeDate) return; // Exit if no active date (edge case)

  const activeIndex = dateElements.indexOf(activeDate);
  // Get the next date (remove the modulo if you don't want looping at the end)
  const nextIndex = (activeIndex + 1) % dateElements.length;
  const nextDate = dateElements[nextIndex];

  // Use the same logic as clicking the date!
  activateTargetDate(nextDate);
  nextDate.scrollIntoView({ behavior: 'smooth', inline: 'center' });
});

4. Add the left arrow click handler #

Do the same for the left arrow, but target the previous date:

// Left arrow click listener—mirror the right arrow logic
document.querySelector('.left-arrow').addEventListener('click', () => {
  const activeDate = document.querySelector('.timeline-date.active');
  if (!activeDate) return;

  const activeIndex = dateElements.indexOf(activeDate);
  // Get previous date (add array length before modulo to avoid negative indexes)
  const prevIndex = (activeIndex - 1 + dateElements.length) % dateElements.length;
  const prevDate = dateElements[prevIndex];

  activateTargetDate(prevDate);
  prevDate.scrollIntoView({ behavior: 'smooth', inline: 'center' });
});

Quick Tweaks & Notes: #

• Looping behavior: The % dateElements.length makes the arrows loop back to the first/last date when you reach the end. If you don't want this, replace it with a check like if (nextIndex < dateElements.length) and only trigger the action if true.
• Scroll alignment: Using inline: 'center' ensures the new active date is centered in your timeline container, which matches what users expect when navigating.
• Consistency: By reusing activateTargetDate, you guarantee that arrow clicks behave exactly like date clicks—same active state, same content loading, no inconsistencies.

This should make your arrows fully sync with the date-click functionality you already have!

内容的提问来源于stack exchange，提问作者Marco