Переключение порядка изображений до и после в галерее слайдеров ⇐ CSS

[Anonymous]

Я работаю над простой веб-галереей с двумя режимами: стандартным (чередующимся) и режимом до и после слайдера. Проблема в том, что изображения до и после в режиме слайдера должны переключаться, но, честно говоря, я не могу в этом разобраться, кроме переключения изображений в папках, но это мешает первому режиму, но работа с первым режимом может быть проще, в идеале слайдер будет работать так, как задумано. Звучит не так уж сложно, но я новичок в этом и просто не понимаю.
Галерея, переключитесь в режим слайдера, нажав W. Чтобы заново создать, просто создайте две папки с именем «1 перед «и «1 после» помещают два изображения jpg в каждую папку с именем «1», а «2» помещают их в ту же папку, что и html. Я отредактировал гораздо более короткую версию кода





Gallery

/* 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; }
img { position: absolute; width: 100%; height: 100%; object-fit: contain; }
.after { clip-path: polygon(0 0, 0 100%, var(--clip, 100%) 100%, var(--clip, 100%) 0); } /* Shows part of after image */
.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; }










Menu: W - Toggle, R - Menu, Arrows - Navigate

let mode = 'alternating', index = 0, menuVisible = false; // Initial settings
const alternating = ["1 before/1.jpg", "1 after/1.jpg", "1 before/2.jpg", "1 after/2.jpg"]; // Alternating mode images
const slider = ["1.jpg", "2.jpg"]; // Slider mode image pairs
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 based on the current mode and index
function updateGallery() {
if (mode === 'alternating') {
galleryImg.src = alternating[index]; // Set alternating mode image
} else {
beforeImg.src = `1 before/${slider[index]}`; // Set before image for slider
afterImg.src = `1 after/${slider[index]}`; // Set after image for slider
}
}

// Switch 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';
index = 0; // Reset index
resetSlider(); // Reset slider position
updateGallery(); // Refresh gallery images
}

// Navigate through images
function navigate(next) {
const length = mode === 'alternating' ? alternating.length : slider.length; // Image count
index = (index + (next ? 1 : -1) + length) % length; // Update index cyclically
updateGallery();
resetSlider();
}

// 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 image
function resetSlider() {
sliderElement.style.left = '100%';
afterImg.style.setProperty('--clip', '100%');
}

// Keyboard controls
document.addEventListener('keydown', e => {
if (e.key === 'w') toggleMode(); // Toggle mode
if (e.key === 'ArrowRight') navigate(true); // Next image
if (e.key === 'ArrowLeft') navigate(false); // Previous image
if (e.key === 'r') toggleMenu(); // Toggle menu
});

// Initialize the gallery
updateGallery();






Подробнее здесь: https://stackoverflow.com/questions/793 ... er-gallery