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

[Anonymous]

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





Dual Mode Gallery

body, html {
margin: 0;
padding: 0;
overflow: hidden;
background: #000;
font-family: sans-serif;
color: #fff;
}

.fullscreen-container {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
cursor: none; /* Default to transparent cursor */
}

.image-container {
position: relative;
width: 100%;
height: 100%;
}

.gallery-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
}

.before-image,
.after-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
}

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

.slider {
position: absolute;
top: 0;
bottom: 0;
left: 100%;
transform: translateX(-100%);
width: 10px;
background: transparent;
cursor: none; /* Transparent cursor */
}

.slider-gallery {
display: none; /* Initially hide slider mode */
}

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

.quick-menu h4 {
margin: 0;
font-size: 14px;
text-align: center;
}

.quick-menu ul {
padding: 0;
list-style: none;
margin: 5px 0 0;
}

.quick-menu li {
margin: 0;
}

Menu

• Left-click: Next
• Right-click: Previous
• Arrow keys: Navigate
• W: Toggle mode
• R: Toggle menu

let mode = 'Alternating'; // Default mode
let currentImageIndex = 0;
let menuVisible = false;

const alternatingContainer = document.querySelector('.alternating-gallery');
const sliderContainer = document.querySelector('.slider-gallery');
const quickMenu = document.getElementById('quickMenu');
const fullscreenContainers = document.querySelectorAll('.fullscreen-container');

// --- Alternating Gallery Mode Variables ---
const alternatingGalleryImage = document.querySelector('.gallery-image');
const alternatingImages = [
{ folder: '1 before', name: '1.jpg' },
{ folder: '1 after', name: '1.jpg' },
{ folder: '1 before', name: '2.jpg' },
{ folder: '1 after', name: '2.jpg' }
];

function loadAlternatingImage() {
const image = alternatingImages[currentImageIndex];
alternatingGalleryImage.src = `${image.folder}/${image.name}`;
}

function nextAlternatingImage() {
currentImageIndex = (currentImageIndex + 1) % alternatingImages.length;
loadAlternatingImage();
}

function prevAlternatingImage() {
currentImageIndex = (currentImageIndex - 1 + alternatingImages.length) % alternatingImages.length;
loadAlternatingImage();
}

// --- Slider Gallery Mode Variables ---
const sliderBeforeImage = document.querySelector('.before-image');
const sliderAfterImage = document.querySelector('.after-image');
const slider = document.querySelector('.slider');
const sliderImages = ['1.jpg', '2.jpg'];

function updateSliderPosition(x) {
slider.style.left = `${x}px`;
sliderAfterImage.style.setProperty('--clip-value', `${x}px`);
}

function nextSliderImage() {
currentImageIndex = (currentImageIndex + 1) % sliderImages.length;
sliderBeforeImage.src = `1 before/${sliderImages[currentImageIndex]}`;
sliderAfterImage.src = `1 after/${sliderImages[currentImageIndex]}`;
updateSliderPosition(sliderContainer.offsetWidth); // Reset slider to far right
}

function prevSliderImage() {
currentImageIndex = (currentImageIndex - 1 + sliderImages.length) % sliderImages.length;
sliderBeforeImage.src = `1 before/${sliderImages[currentImageIndex]}`;
sliderAfterImage.src = `1 after/${sliderImages[currentImageIndex]}`;
updateSliderPosition(sliderContainer.offsetWidth); // Reset slider to far right
}

sliderContainer.addEventListener('mousemove', (e) =>
updateSliderPosition(e.clientX - sliderContainer.offsetLeft)
);

sliderContainer.addEventListener('click', () => nextSliderImage());

// --- Mode Switching ---
function toggleMode() {
if (mode === 'Alternating') {
mode = 'Slider';
alternatingContainer.style.display = 'none';
sliderContainer.style.display = 'flex';
currentImageIndex = 0; // Reset index
nextSliderImage(); // Load the first slider image
} else {
mode = 'Alternating';
sliderContainer.style.display = 'none';
alternatingContainer.style.display = 'flex';
currentImageIndex = 0; // Reset index
loadAlternatingImage(); // Load the first alternating image
}
console.log(`Mode switched to: ${mode}`);
}

// --- Toggle Menu Visibility ---
function toggleMenu() {
menuVisible = !menuVisible;
quickMenu.style.display = menuVisible ? 'block' : 'none';
fullscreenContainers.forEach(container => {
container.style.cursor = menuVisible ? 'default' : 'none';
});
}

document.addEventListener('keydown', (e) => {
if (e.key === 'w') {
toggleMode();
} else if (e.key === 'ArrowRight') {
mode === 'Alternating' ? nextAlternatingImage() : nextSliderImage();
} else if (e.key === 'ArrowLeft') {
mode === 'Alternating' ? prevAlternatingImage() : prevSliderImage();
} else if (e.key === 'r') {
toggleMenu();
}
});

alternatingContainer.addEventListener('click', nextAlternatingImage);
alternatingContainer.addEventListener('contextmenu', (e) => {
e.preventDefault();
prevAlternatingImage();
});

sliderContainer.addEventListener('contextmenu', (e) => {
e.preventDefault();
prevSliderImage();
});

// Initialize default mode
loadAlternatingImage();






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