Бесконечный цикл слайд-шоу с использованием CSS и/или HTML, без JS. ⇐ Html

[Anonymous]

Мы работаем над этим некоторое время, и все идет не так, как планировалось: любая помощь будет оценена по достоинству! Я пытаюсь создать слайд-шоу из 4 изображений, где:

• На последнем изображении, когда пользователь нажимает стрелку «Далее», слайд-шоу возвращается к первому изображению. В этом случае первое изображение следует рассматривать как еще одно «следующее» изображение, а не как слайд-шоу, просматривающее все изображения задом наперед. По сути, это слайд-шоу с «бесконечным циклом».
• Яваскрипт практически отсутствует, так как из-за этого слайд-шоу загружается намного медленнее, чем остальная часть страницы.
• Переход между изображениями плавный.

По сути, я хочу воссоздать приведенный ниже код, но с как можно меньшим количеством Javascript. Это не обязательно должно быть точно так же, но я хочу оставаться похожим. Я также попробовал Slick Slider, но сейчас у меня с этим трудности, поскольку я не самый продвинутый за пределами HTML и CSS.
Это мой код, содержащий Javascript:

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

const imageUrls = [
'https://picsum.photos/id/1015/800/400',
'https://picsum.photos/id/1016/800/400',
'https://picsum.photos/id/1018/800/400',
'https://picsum.photos/id/1020/800/400'
];

const wrapper = document.getElementById('slides-wrapper');
let slides = [];
let currentIndex = 1; // Start at 1 (first real slide after cloned last)
let allowTransition = true;

// Setup: Clone first and last for seamless loop
function setupSlides() {
const fullSlides = [imageUrls[imageUrls.length - 1], ...imageUrls, imageUrls[0]];
fullSlides.forEach(url => {
const slide = document.createElement('div');
slide.className = 'slide';
const img = document.createElement('img');
img.src = url;
img.alt = 'Slide';
slide.appendChild(img);
wrapper.appendChild(slide);
slides.push(slide);
});
}

// Center current slide
function updateSlide(skipTransition = false) {
const slideWidth = slides[0].offsetWidth + 30; // slide + margin
const containerWidth = document.querySelector('.slideshow-container').offsetWidth;
const offset = slideWidth * currentIndex;
if (skipTransition) wrapper.style.transition = 'none';
else wrapper.style.transition = 'transform 0.5s ease-in-out';
wrapper.style.transform = `translateX(${containerWidth / 2 - offset - slideWidth / 2}px)`;
}

// Go to next
function nextSlide() {
if (!allowTransition) return;
currentIndex++;
updateSlide();
allowTransition = false;
}

// Go to previous
function prevSlide() {
if (!allowTransition) return;
currentIndex--;
updateSlide();
allowTransition = false;
}

// Handle infinite loop jump
wrapper.addEventListener('transitionend', () => {
if (currentIndex === 0) {
currentIndex = imageUrls.length;
updateSlide(true);

} else if (currentIndex === imageUrls.length + 1) {
currentIndex = 1;
updateSlide(true);
}
allowTransition = true;
});

// Initialize
document.addEventListener('DOMContentLoaded', () => {
setupSlides();
updateSlide(true);
document.querySelector('.slideshow-container').classList.add('ready');
});

window.addEventListener('resize', () => {
updateSlide(true);
});

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

/*IMAGE SLIDESHOW*/
.slideshow-container {
position: relative;
width: 100%;
max-width: 2000px;
overflow: hidden;
margin-top: -200px;
visibility: hidden;
}

.slideshow-container.ready {
visibility: visible;
}

.slides-wrapper {
display: flex;
transition: transform 0.5s ease-in-out;
}

.slide {
width: 70%;
margin: 0 15px;
flex-shrink: 0;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.slide img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}

.arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 2.5rem;
color: white;
background: rgba(0, 0, 0, 0.5);
padding: 0.4rem 0.8rem;
cursor: pointer;
user-select: none;
z-index: 2;
border-radius: 6px;
}

.arrow.left {
left: 10px;
}

.arrow.right {
right: 10px;
}

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

❮
❯

Подробнее здесь: https://stackoverflow.com/questions/797 ... html-no-js