Бесконечное петлевое слайд -шоу с CSS и/или HTML, без JS ⇐ Javascript

[Anonymous]

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

На последнем изображении, когда пользователь нажимает на стрелку «Далее», слайд-шоу возвращается к первому изображению. В этом случае первое изображение должно рассматриваться как еще одно «следующее» изображение, а не как слайд -шоу, возвращающееся через все изображения назад. По сути, слайд -шоу «бесконечно петля». Это не должно быть точно таким же, но я хочу оставаться похожим. Я также попробовал Slick Slider, но мне трудно с этим в настоящее время, так как я не самый продвинутый за пределами HTML и CSS./*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; }
< /code>
html: < /p>

❮
❯




< /code>
javascript: < /p>
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);
});


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