Крайняя левая карта в автоматическом слайдере карт отображается не полностью ⇐ CSS

[Anonymous]

Я интегрировал этот HTML-код автоматической карточки-слайдера на свой сайт, но вся крайняя левая карточка не отображается и выглядит так, как будто она обрезана.

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

document.addEventListener("DOMContentLoaded", () => {
const wrapper = document.querySelector(".wrapper");
const carousel = document.querySelector(".carousel");
const firstCardWidth = carousel.querySelector(".card").offsetWidth;
const arrowBtns = document.querySelectorAll(".wrapper i");
const carouselChildren = [...carousel.children];

let isDragging = false,
isAutoPlay = true,
startX, startScrollLeft, timeoutId;

let cardPerView = 10;

carouselChildren.slice(-cardPerView).reverse().forEach(card => {
carousel.insertAdjacentHTML("afterbegin", card.outerHTML);
});

carouselChildren.slice(0, cardPerView).forEach(card => {
carousel.insertAdjacentHTML("beforeend", card.outerHTML);
});

carousel.classList.add("no-transition");
carousel.scrollLeft = carousel.offsetWidth - wrapper.offsetWidth + (firstCardWidth * cardPerView) / 2;
carousel.classList.remove("no-transition");

arrowBtns.forEach(btn => {
btn.addEventListener("click", () => {
carousel.scrollLeft += btn.id === "left" ? -firstCardWidth : firstCardWidth;
});
});

const dragStart = (e) => {
isDragging = true;
carousel.classList.add("dragging");
startX = e.pageX;
startScrollLeft = carousel.scrollLeft;
};

const dragging = (e) => {
if (!isDragging) return;
carousel.scrollLeft = startScrollLeft - (e.pageX - startX);
};

const dragStop = () => {
isDragging = false;
carousel.classList.remove("dragging");
};

const infiniteScroll = () => {
if (carousel.scrollLeft === 0) {
carousel.classList.add("no-transition");
carousel.scrollLeft = carousel.scrollWidth - (2 * carousel.offsetWidth);
carousel.classList.remove("no-transition");
} else if (Math.ceil(carousel.scrollLeft) === carousel.scrollWidth - carousel.offsetWidth) {
carousel.classList.add("no-transition");
carousel.scrollLeft = carousel.offsetWidth;
carousel.classList.remove("no-transition");
}

clearTimeout(timeoutId);
if (!wrapper.matches(":hover")) autoPlay();
};

const autoPlay = () => {
if (window.innerWidth < 800 || !isAutoPlay) return;
timeoutId = setTimeout(() => carousel.scrollLeft += firstCardWidth, 1000);
};

autoPlay();

carousel.addEventListener("mousedown", dragStart);
carousel.addEventListener("mousemove", dragging);
document.addEventListener("mouseup", dragStop);
carousel.addEventListener("scroll", infiniteScroll);
wrapper.addEventListener("mouseenter", () =>  clearTimeout(timeoutId));
wrapper.addEventListener("mouseleave", autoPlay);
});

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

@import url('https://fonts.googleapis.com/css2?family=Wix+Madefor+Text:ital,wght@0,400..800;1,400..800&display=swap');

* {
0;
padding: 0;
box-sizing: border-box;
'Poppins',
sans-serif;
}

body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #fff;
0 20px;
}

.wrapper {
position: relative;
max-width: 1560px;
width: 100%;
padding: 0 60px;
overflow: hidden;
}

.wrapper i {
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
color: #E21C21;
font-size: 3.5rem;
padding: 5px;
z-index: 1;
user-select: none;
}

.wrapper i#left {
left: 10px;
}

.wrapper i#right {
right: 10px;
}

.wrapper i:hover {
color: #020202;
}

.carousel {
display: flex;
gap: 15px;
overflow: hidden;
scroll-behavior: smooth;
padding: 15px 0;
border-radius: 10px;
scroll-snap-type: x mandatory;
scroll-snap-align: start;
}

.carousel.no-transition {
scroll-behavior: auto;
}

.card {
min-width: 130px;
max-width: 130px;
height: 150px;
background: #fff;
padding: 10px 15px;
border-radius: 10px;
box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
scroll-snap-align: start;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.card:hover {
box-shadow: 0 3px 10px rgb(0 0 0 / 0.3);
}

.card .img {
width: 100%;
height: 80%;
display: flex;
justify-content: center;
align-items: center;
}

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

.card .text {
width: 100%;
height: 20%;
display: flex;
justify-content: center;
align-items: center;
font-size: 1rem;
font-weight: 700;
text-align: center;
color: #333;
10px;
"Wix Madefor Text",
sans-serif;
}

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

[*]





[i][/i]
[list]


[url=https://www.porsche.com][i][/url]

Porsche

[*]

[url=https://www.fiat.com]
[img]https://i.imgur.com/EZ0DQqx.png[/img]
[/url]

Fiat

[/list]
[/i]

Я не могу поделиться полным кодом, но вот он:
https://justpaste.it/f8u82
[img]https://i. sstatic.net/xVJPE7Vi.png[/img]

как это исправить

Подробнее здесь: https://stackoverflow.com/questions/785 ... -displayed