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

[Anonymous]

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

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

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 = [
{ color: 'red' },
{ color: 'blue' },
{ color: 'green' },
{ color: 'yellow' },
];

function loadAlternatingImage() {
const image = alternatingImages[currentImageIndex];
alternatingGalleryImage.style.backgroundColor = image.color;
}

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 = [
{ before: 'red', after: 'blue' },
{ before: 'green', after: 'yellow' },
];

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

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

function prevSliderImage() {
currentImageIndex = (currentImageIndex - 1 + sliderImages.length) % sliderImages.length;
const image = sliderImages[currentImageIndex];
sliderBeforeImage.style.backgroundColor = image.before;
sliderAfterImage.style.backgroundColor = image.after;
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();

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

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%;
}

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

.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;
}

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

[h4]Menu[/h4]
[list]
[*]Left-click: Next
[*]Right-click: Previous
[*]Arrow keys: Navigate
[*]W: Toggle mode
[*]R: Toggle menu
[/list]

"Рабочий код", фрагмент ведет себя странно, с HTML все в порядке, я займусь этим позже, все равно занимался этим целый день

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

let mode = 'alternating'; // Current mode ('alternating' or 'slider')
let currentImageIndex = 0; // Keep track of the current 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;
}

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

 


 



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

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