Image gallery doesn't continue from the same image when switching between standard and slider modes

Question

I’m working on a simple web gallery with two modes: standard (alternating) and before and after slider mode. The goal is that when switching between these two modes with "w" key, the gallery should continue from the same image it was displayed, just with a different mode, the problem is when on image number 3 and 4 in standard mode and switching to the slider mode the images are black and have to go back to first two images but switching from first two images works, I assume it has to do something with slider overlaying two images over another, now when switching other way around when on first image pair in slider mode switching goes to first image, that's good, but when switching on second pair it goes to after image of first image instead of 2nd before image

To recrate just create two folders named "1 before" and "1 after" put two jpg images in each folder named "1" and "2" put them into the same folder as html.

let mode = 'alternating'; // Current mode ('alternating' or 'slider')
let currentImageIndex = 0; // Keep track of the current color index across modes
const alternating = ["#FF5733", "#33FF57", "#3357FF", "#57FF33"]; // Color values for alternating mode
const slider = ["#FF5733", "#33FF57"]; // Color values for slider mode
const galleryImg = document.getElementById("galleryImg");
const beforeImg = document.getElementById("beforeImg");
const afterImg = document.getElementById("afterImg");
const sliderElement = document.querySelector(".slider");
const menu = document.getElementById("menu");

// Update the gallery colors based on the current mode and index
function updateGallery() {
    if (mode === 'alternating') {
        galleryImg.style.backgroundColor = alternating[currentImageIndex]; // Use the current index to set the color
    } else {
        // Use the current index for slider mode (index is shared)
        beforeImg.style.backgroundColor = slider[currentImageIndex]; // Swap before and after colors
        afterImg.style.backgroundColor = slider[currentImageIndex];
    }
}

// Toggle between alternating and slider modes
function toggleMode() {
    mode = mode === 'alternating' ? 'slider' : 'alternating'; // Toggle mode
    document.querySelector(".mode-alternating").style.display = mode === 'alternating' ? 'flex' : 'none';
    document.querySelector(".mode-slider").style.display = mode === 'slider' ? 'flex' : 'none';
    updateGallery(); // Ensure the same color continues in the new mode
}

// Navigate through colors while keeping index synced across modes
function navigate(next) {
    const length = mode === 'alternating' ? alternating.length : slider.length; // Use appropriate length
    currentImageIndex = (currentImageIndex + (next ? 1 : -1) + length) % length; // Update index cyclically
    updateGallery(); // Refresh gallery to reflect the updated index
    resetSlider(); // Reset slider for slider mode
}

// Show or hide the menu
function toggleMenu() {
    menuVisible = !menuVisible;
    menu.style.display = menuVisible ? 'block' : 'none';
}

// Update slider and after image clip based on mouse position
document.querySelector(".mode-slider").addEventListener('mousemove', e => {
    const clip = Math.min(Math.max(e.clientX / window.innerWidth * 100, 0), 100); // Percent position
    afterImg.style.setProperty('--clip', `${clip}%`); // Adjust after image clip
    sliderElement.style.left = `${clip}%`; // Move slider
});

// Reset slider to fully reveal after color
function resetSlider() {
    sliderElement.style.left = '100%'; // Reset slider to far right
    afterImg.style.setProperty('--clip', '100%'); // Reveal after color completely
}

// Keyboard controls for toggling modes and navigation
document.addEventListener('keydown', e => {
    if (e.key === 'w') toggleMode(); // Toggle mode
    if (e.key === 'ArrowRight') navigate(true); // Navigate to next color
    if (e.key === 'ArrowLeft') navigate(false); // Navigate to previous color
    if (e.key === 'r') toggleMenu(); // Toggle menu visibility
});

// Initialize the gallery on page load
updateGallery();

/* General page styling */
body {
  margin: 0;
  background: #000;
  color: #fff;
  overflow: hidden;
  font-family: sans-serif;
}

.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fullscreen div {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.after {
  clip-path: polygon(0 0, 0 100%, var(--clip, 100%) 100%, var(--clip, 100%) 0);
}

/* Shows part of after color */
.slider {
  position: absolute;
  width: 10px;
  background: #fff;
  cursor: col-resize;
  top: 0;
  bottom: 0;
  left: var(--clip, 100%);
  transform: translateX(-50%);
}

#menu {
  position: fixed;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.8);
  padding: 5px;
  border-radius: 5px;
  font-size: 12px;
  display: none;
}

<div class="fullscreen mode-alternating">
  <div id="galleryImg" style="background-color: transparent;"></div> <!-- Color for alternating mode -->
</div>
<div class="fullscreen mode-slider" style="display: none;">
  <div id="beforeImg" class="before" style="background-color: transparent;"></div> <!-- Before color in slider mode -->
  <div id="afterImg" class="after" style="background-color: transparent; --clip: 100%;"></div> <!-- After color in slider mode -->
  <div class="slider"></div> <!-- Draggable slider -->
</div>
<div id="menu">Menu: W - Toggle, R - Menu, Arrows - Navigate</div>