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

[Anonymous]

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

Код: Выделить всё

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();

Код: Выделить всё

/* 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'; // Current mode ('alternating' or 'slider')
let currentImageIndex = 0; // Keep track of the current image index across modes
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 images based on the current mode and index
function updateGallery() {
if (mode === 'alternating') {
galleryImg.src = alternating[currentImageIndex]; // Use the current index to set the image
} else {
// Use the current index for slider mode (index is shared)
beforeImg.src = `1 after/${slider[currentImageIndex]}`; // Swap before and after images
afterImg.src = `1 before/${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 image continues in the new mode
}

// Navigate through images 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 image
function resetSlider() {
sliderElement.style.left = '100%'; // Reset slider to far right
afterImg.style.setProperty('--clip', '100%'); // Reveal after image 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 image
if (e.key === 'ArrowLeft') navigate(false); // Navigate to previous image
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;
}

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

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