Проблема с центрированием слайдера на мобильных устройствах: элементы смещаются, дублируются и теряют выравнивание с теч ⇐ CSS

[Anonymous]

У меня возникла проблема со слайдером в мобильной версии моего сайта, и я не могу понять, что именно не так. В мобильной версии слайды не центрируются должным образом. В результате элементы иногда смещаются в сторону, а иногда слайды дублируются. Со временем центрирование слайдов полностью нарушается, и они начинают вести себя непоследовательно.
На десктопной версии это не так заметно, так как контейнер занимает всю ширину экрана, но на мобильном телефоне мне просто нужно, чтобы слайд находился точно по центру как при ручной, так и при автоматической прокрутке. Я только начал изучать JS.
Что мне попробовать дальше?

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

document.addEventListener("DOMContentLoaded", function() {
const wrapper = document.querySelector(".wrapper");
const slides = Array.from(wrapper.children);
const leftButton = document.querySelector(".scroll-button.left");
const rightButton = document.querySelector(".scroll-button.right");

function getSlideWidth() {
const slide = slides[0]; // Первый слайд
const style = window.getComputedStyle(slide);
const marginRight = parseInt(style.marginRight, 10) || 0; // Учитываем отступ между слайдами
return slide.getBoundingClientRect().width + marginRight;
}

const slideWidth = getSlideWidth();

// Дублируем слайды для бесконечного скролла
slides.forEach(slide => {
const cloneStart = slide.cloneNode(true);
const cloneEnd = slide.cloneNode(true);
wrapper.appendChild(cloneEnd); // Дублируем в конец
wrapper.insertBefore(cloneStart, wrapper.firstChild); // Дублируем в начало
});

const originalSlidesCount = slides.length;

wrapper.scrollLeft = originalSlidesCount * slideWidth;

// Корректировка положения
function correctScrollPosition() {
const maxScrollLeft = (originalSlidesCount * 2 - 1) * slideWidth;

if (wrapper.scrollLeft < originalSlidesCount * slideWidth - slideWidth / 2) {
wrapper.scrollLeft += originalSlidesCount * slideWidth;
} else if (wrapper.scrollLeft > maxScrollLeft + slideWidth / 2) {
wrapper.scrollLeft -= originalSlidesCount * slideWidth;
}
}

// Прокрутка влево
leftButton.addEventListener("click", function() {
const targetScrollLeft = wrapper.scrollLeft - slideWidth;
wrapper.scrollTo({
left: targetScrollLeft,
behavior: "smooth",
});

setTimeout(correctScrollPosition, 300); // Исправляем после анимации
});

// Прокрутка вправо
rightButton.addEventListener("click", function() {
const targetScrollLeft = wrapper.scrollLeft + slideWidth;
wrapper.scrollTo({
left: targetScrollLeft,
behavior: "smooth",
});

setTimeout(correctScrollPosition, 300); // Исправляем после анимации
});

// Корректируем позицию при ручной прокрутке
wrapper.addEventListener("scroll", () => {
clearTimeout(wrapper.isScrolling);
wrapper.isScrolling = setTimeout(correctScrollPosition, 100);
});

// Автоскролл
const intervalTime = 5000; // Интервал в миллисекундах
let autoScroll = setInterval(() => {
const targetScrollLeft = wrapper.scrollLeft + slideWidth;
wrapper.scrollTo({
left: targetScrollLeft,
behavior: "smooth",
});

setTimeout(correctScrollPosition, 300); // Исправляем после анимации
}, intervalTime);

// Остановка автоскролла при наведении мыши
wrapper.addEventListener("mouseenter", () => clearInterval(autoScroll));

// Возобновление автоскролла при убирании мыши
wrapper.addEventListener("mouseleave", () => {
autoScroll = setInterval(() =>  {
const targetScrollLeft = wrapper.scrollLeft + slideWidth;
wrapper.scrollTo({
left: targetScrollLeft,
behavior: "smooth",
});

setTimeout(correctScrollPosition, 300);
}, intervalTime);
});
});

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

.scroll-container {
display: flex;
margin-bottom: 15px;
align-items: center;
gap: 10px;
width: 100%;
position: relative;
}

.wrapper {
display: flex;
overflow-x: scroll;
gap: 10px;
padding: 10px;
border-radius: 10px;
width: 100%;
overflow-y: hidden;
/* Скрываем полосу прокрутки */
-ms-overflow-style: none;
scrollbar-width: none;
}

.wrapper::-webkit-scrollbar {
display: none;
/* Chrome, Safari и Opera */
}

.content-item {
flex: 0 0 608px;
/* Фиксированная ширина слайда */
height: 200px;
/* Высота слайда */
background-color: #f0f0f0;
position: relative;
/* Для позиционирования заголовка */
color: #fff;
text-align: left;
padding: 20px;
display: flex;
box-sizing: border-box;
flex-direction: column;
justify-content: flex-end;
background-size: cover;
/* Адаптация фонового изображения */
background-position: center;
background-repeat: no-repeat;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
/* Лёгкая тень */
}

.content-text {
display: flex;
flex-direction: column;
justify-content: flex-start;
position: relative;
z-index: 1;
word-wrap: break-word;
overflow-wrap: break-word;
white-space: normal;
max-width: 80%;
}

.content-text h2 {
margin: 0 0 10px 0;
font-size: 18px;
font-weight: bold;
color: #333333;
}

.content-text p {
margin: 0;
font-size: 14px;
color: #666666;
line-height: 1.4;
}

.scroll-button {
background-color: transparent;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
position: absolute;
z-index: 10;
border: none
}

.scroll-button.left {
left: 10px;
top: 50%;
transform: translateY(-50%);
}

.scroll-button.right {
right: 10px;
top: 50%;
transform: translateY(-50%);
}

.scroll-button span {
font-size: 18px;
font-weight: bold;
color: #333;
}

.scroll-button:hover {
background-color: #f8f9fa;
}

.scroll-button:active {
background-color: #e2e6ea;
}

.scroll-button::after {
content: '';
position: absolute;
inset: 0;
border-radius: 0;
box-shadow: none;
}

.icon-container {
position: absolute;
/* Абсолютное позиционирование */
top: 50%;
/* Центрируем по вертикали */
right: 20px;
/* Отступ от правого края */
transform: translateY(-50%);
/* Корректируем вертикальное центрирование */
}

.icon-container img {
width: 160px;
/* Размер иконки */
height: 160px;
object-fit: contain;
/* Сохраняем пропорции */
}

}
@media (max-width: 768px) {
.wrapper {
overflow-x: scroll;
/* Отключаем горизонтальную прокрутку */
}

.content-item {
flex: 0 0 100%;
/* Слайд занимает 100% ширины экрана */
height: 200px;
/* Задайте нужную высоту */
margin-right: 0;
/* Убираем отступы между слайдами */
}
}
@media (max-width: 500px) {
.category-item img {
scale: 1.5
}
}
@media (max-width: 768px) {
.scroll-container {
overflow: hidden;
position: relative
}

.content-item {
flex: 0 0 90%;
/* Слайды занимают 90% ширины экрана */
height: 150px;
/* Уменьшаем высоту для мобильных */
}

.wrapper {
gap: 5px;
/* Уменьшаем отступы между слайдами */
padding: 5px;
/* Сужаем внутренние отступы */
}
}
@media (max-width: 480px) {
.content-item {
flex: 0 0 95%;
/* Слайды занимают почти всю ширину экрана */
height: 120px;
/* Ещё меньше высота для маленьких экранов */
}

.icon-container img {
width: 100px;
height: 100px;
object-fit: contain;
}
}
@media (max-width: 768px) {
.wrapper {
display:  flex;
justify-content: start;
align-items: center;
overflow-x: auto;
scroll-behavior: smooth;
}

.wrapper::-webkit-scrollbar {
display: none;
}

.scroll-button {
display: none;
}
}

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

  & a m p ; l t ; & l t ; / s p a n & g t ; & l t ; / b u t t o n & g t ; < b r   / >     & l t ; d i v   c l a s s = " w r a p p e r " & g t ; < b r   / >         & l t ; d i v   c l a s s = " c o n t e n t - i t e m "   s t y l e = " b a c k g r o u n d - c o l o r : # E B D 8 F 4 " & g t ; < b r   / >             & l t ; d i v   c l a s s = " c o n t e n t - t e x t " & g t ; < b r   / >                 & l t ; h 2 & g t ; O s a l e g e   k o n k u r s i l & l t ; / h 2 & g t ; < b r   / >                 & l t ; p & g t ; S a a g e   v õ i t j a k s   j a   v õ i t k e   v ä ä r t u s l i k k e   a u h i n d u ! & l t ; / p & g t ; < b r   / >             & l t ; / d i v & g t ; < b r   / >             & l t ; d i v   c l a s s = " i c o n - c o n t a i n e r " & g t ; < b r   / >                 & l t ; i m g   s r c = " h t t p s : / / h 2 h . e e / a s s e t s / i m g / i c o n s _ s l i d e r / c u p . p n g "   a l t = " I c o n " & g t ; < b r   / >             & l t ; / d i v & g t ; < b r   / >         & l t ; / d i v & g t ; < b r   / >         & l t ; d i v   c l a s s = " c o n t e n t - i t e m "   s t y l e = " b a c k g r o u n d - c o l o r : # A D D 2 F F " & g t ; < br />      
Postitage kuulutusi
Rääkige maailmale oma toodetest ja teenustest!

[img]https://h2h.ee/assets/img/icons_slider/pen.png[/img]




Turvalisuse juhend
Kuidas vältida petuskeeme?

[img]https://h2h.ee/assets/img/icons_slider/security.png[/img]




Vaheta oma kaup
Vaheta vana uue vastu — lihtsalt ja mugavalt!

[img]https://h2h.ee/assets/img/icons_slider/exchange.png[/img]




Vaheta oma kaup
Vaheta vana uue vastu — lihtsalt ja mugavalt!

[img]https://h2h.ee/assets/img/icons_slider/exchange.png[/img]




Turvalisuse juhend
Kuidas vältida petuskeeme?

[img]https://h2h.ee/assets/img/icons_slider/security.png[/img]




Postitage kuulutusi
Rääkige maailmale oma toodetest ja teenustest!

[img]https://h2h.ee/assets/img/icons_slider/pen.png[/img]




Osalege konkursil
Saage võitjaks ja võitke väärtuslikke auhindu!

[img]https://h2h.ee/assets/img/icons_slider/cup.png[/img]




Vaheta oma kaup
Vaheta vana uue vastu — lihtsalt ja mugavalt!

[img]https://h2h.ee/assets/img/icons_slider/exchange.png[/img]




Turvalisuse juhend
Kuidas vältida petuskeeme?

[img]https://h2h.ee/assets/img/icons_slider/security.png[/img]




Postitage kuulutusi
Rääkige maailmale oma toodetest ja teenustest!

[img]https://h2h.ee/assets/img/icons_slider/pen.png[/img]




Osalege konkursil
Saage võitjaks ja võitke väärtuslikke auhindu!

[img]https://h2h.ee/assets/img/icons_slider/cup.png[/img]



  >

Подробнее здесь: https://stackoverflow.com/questions/792 ... lose-align