Как изменить анимацию для первого и последнего изображения при создании слайда карусели с помощью HTML, CSS и чистого JS ⇐ CSS

[Anonymous]

Я реализовал базовую карусель изображений (аналогично этому примеру). Однако я столкнулся с проблемой перехода при циклическом переходе от первого слайда к последнему или наоборот. Вместо плавного перехода к соседнему слайду все изображения смещаются, создавая резкий визуальный эффект. Я хочу, чтобы переход вёл себя так, как если бы карусель представляла собой непрерывный цикл, показывающий только одно изменение слайда.
Вот мой код.

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

const slidesContainer = document.getElementById("slides-container");
const dotsContainer = document.getElementById("dots-container");
const prevButton = document.getElementById("slide-arrow-prev");
const nextButton = document.getElementById("slide-arrow-next");
const images = ["img1", "img2", "img3"];
let slideIndex = 1;

document.addEventListener("DOMContentLoaded", () => {
generateImages(images);
setEventForButton(prevButton);
setEventForButton(nextButton);
});

// Generate images and dots
const generateImages = (imageToGenerate) => {
imageToGenerate.forEach((image, index) => {
// Generate images
const slideComponent = document.createElement("li");
slideComponent.classList.add("slide");
slideComponent.innerHTML = `
[img]https://placehold.co/600x400?text=${image}.jpg[/img]
`;

slidesContainer.appendChild(slideComponent);

// Generate dots
const dotComponent = document.createElement("li");
dotComponent.classList.add("dot");
if (index === 0) dotComponent.classList.add("active");
dotComponent.addEventListener("click", () => {
showSlide(index + 1);
});
dotsContainer.appendChild(dotComponent);
});
};

// Set event for next button
const setEventForButton = (button) => {
button.addEventListener("click", () => {
if (button.id === "slide-arrow-prev") showSlide(slideIndex > 1 ? slideIndex - 1 : images.length);
else showSlide(slideIndex < images.length ? slideIndex + 1 : 1);
});
};

// Set slideshow
const showSlide = (n) => {
const slides = document.querySelectorAll(".slide");
const dots = document.querySelectorAll(".dot");

const slideWidth = slides[0].clientWidth;
slidesContainer.scrollLeft = slideWidth * (n - 1);

dots.forEach((dot) =>  dot.classList.remove("active"));
dots[n - 1].classList.add("active");
slideIndex = n;
};

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

* {
box-sizing: border-box;
}

body {
max-width: 1440px;
margin: auto;
}

.slider-wrapper {
margin: 1rem;
position: relative;
overflow: hidden;
}

.slides-container {
height: calc(100vh - 2rem);
width: 100%;
display: flex;
scroll-behavior: smooth;
overflow: hidden;
list-style: none;
margin: 0;
padding: 0;
}

.slide-arrow {
position: absolute;
display: flex;
top: 0;
bottom: 0;
margin: auto;
height: 4rem;
background-color: white;
border: none;
width: 2rem;
font-size: 3rem;
padding: 0;
cursor: pointer;
opacity: 0.5;
transition: opacity 100ms;
}

.slide-arrow:hover,
.slide-arrow:focus {
opacity: 1;
}

#slide-arrow-prev {
left: 0;
padding-left: 0.25rem;
border-radius: 0 2rem 2rem 0;
}

#slide-arrow-next {
right: 0;
padding-left: 0.75rem;
border-radius: 2rem 0 0 2rem;
}

.slide {
width: 100%;
height: 100%;
flex: 1 0 100%;
}

.slide img {
width: 100%;
height: 100%;
object-fit: contain;
}

.dots-container {
position: absolute;
top: 76%;
left: 49%;
right: auto;
transform: translateX(-50%);
display: flex;
}

.dot {
cursor: pointer;
display: inline-block;
width: 0.8rem;
height: 0.8rem;
margin: 0 2px;
border-radius: 50%;
background-color: gray;
transition: background_color 0.6s ease;
}

.active,
.dot:hover {
background-color: black;
}

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

Exercise 2





‹
›

[list][/list]


[list][/list]

Подробнее здесь: https://stackoverflow.com/questions/793 ... ating-a-ca