需求：幻灯片首屏禁用Prev按钮、末屏禁用Next按钮

Hey there! Let’s tackle your lightbox/slideshow issues step by step—sounds like you’ve got a solid start with the album section toggles, just need to iron out those navigation kinks. Here’s a practical, actionable solution tailored to your setup:

1. Core Logic: Disable Prev/Next at First/Last Slides #

First, we’ll add a helper function to check the current slide position and toggle button states. This needs to run whenever the slide changes or you switch albums.

First, define global (or scoped) variables to track your current state (make sure these are accessible to all your navigation functions):

let currentIndex = 0;
let currentAlbumImages = []; // Will hold the images of the active album
const prevBtn = document.querySelector('.prev-btn'); // Update selector to match your button
const nextBtn = document.querySelector('.next-btn'); // Update selector to match your button

Then add the button state update function:

function updateNavButtons() {
  const isFirstSlide = currentIndex === 0;
  const isLastSlide = currentIndex === currentAlbumImages.length - 1;

  // Toggle disabled state for Prev button
  prevBtn.disabled = isFirstSlide;
  prevBtn.classList.toggle('disabled', isFirstSlide);

  // Toggle disabled state for Next button
  nextBtn.disabled = isLastSlide;
  nextBtn.classList.toggle('disabled', isLastSlide);
}

Add CSS to make disabled buttons look unclickable (adjust styles to match your site):

.prev-btn.disabled, .next-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none; /* Prevents accidental clicks */
}

2. Fix Last Slide Jump Behavior #

Modify your existing Prev/Next click handlers to respect the first/last slide boundaries. Replace your current navigation logic with this:

// Next button handler
nextBtn.addEventListener('click', () => {
  if (currentIndex < currentAlbumImages.length - 1) {
    currentIndex++;
    showCurrentSlide(); // Replace with your function to display the active slide
    updateNavButtons();
  }
});

// Prev button handler
prevBtn.addEventListener('click', () => {
  if (currentIndex > 0) {
    currentIndex--;
    showCurrentSlide(); // Replace with your function to display the active slide
    updateNavButtons();
  }
});

3. Integrate with Album Section Toggles #

Make sure when you switch albums, you reset the slide index and update the image array. Modify your existing album switch function to include these steps:

function switchAlbum(targetAlbumId) {
  // Hide all album sections
  document.querySelectorAll('.album-section').forEach(section => {
    section.style.display = 'none';
  });

  // Show target album
  const targetAlbum = document.getElementById(targetAlbumId);
  targetAlbum.style.display = 'block';

  // Update current album's images (adjust selector to match your image elements)
  currentAlbumImages = Array.from(targetAlbum.querySelectorAll('.album-image'));
  // Reset to first slide
  currentIndex = 0;
  // Show the first slide
  showCurrentSlide();
  // Update button states immediately
  updateNavButtons();
}

Quick Notes to Avoid Bugs #

• Double-check that your showCurrentSlide() function uses currentIndex to display the correct image from currentAlbumImages.
• If your original lightbox script has built-in navigation, you may need to override its default click handlers with the logic above to prevent conflicting behavior.

内容的提问来源于stack exchange，提问作者Katarina Perović