Создание прокручиваемой диагональной карусели с N изображениями ⇐ Html

[Anonymous]

У меня есть карусель изображений, которую я назвал по диагонали, и теперь я хочу прокручивать изображения. Единственная проблема заключается в том, что если я добавляю в карусельную дорожку больше изображений, чем у меня есть четыре, изображения обрезаются контейнером из-за большой ширины карусельной дорожки. Как я могу изменить свой CSS или JavaScript, чтобы разместить N изображений и никогда не обрезаться?
Это мой CSS-код:
/* Center inside the container */
.diagonal-carousel .carousel-inner {
position: absolute;
width: 100%;
height: 100%;
display: flex;
align-items: end;
justify-content: flex-start;
transform-style: preserve-3d;
perspective: 700px;
}

/* Apply the tilt and manage width */
.diagonal-carousel .carousel-track {
display: flex;
gap: 60px;
transform-style: preserve-3d;
transform: rotate3d(2, 0, 1, 20deg) scale(0.8); /* Scale down */
width: max-content;
padding: 0 20vw;
transform-origin: bottom right; /* Ensure scaling from center */
}

/* Each card: same width, proper 3D flatness */
.diagonal-carousel .case-card {
flex: 0 0 80vw;
height: 70vh;
background: var(--card, #222);
border-radius: 24px;
overflow: hidden;
box-shadow: 0 10px 40px rgba(0,0,0,0.25);
transform-style: preserve-3d;
transform: rotateY(0deg); /* stays flat */
}

а это мой код JavaScript:
// Diagonal Scroll Case Carousel
const diagonalTrack = document.querySelector('.diagonal-carousel .carousel-track');
// To add animations to cards if needed
const diagonalCards = gsap.utils.toArray('.diagonal-carousel .case-card');

// Total diagonal distance to scroll
const totalDiagonalScroll = diagonalTrack.scrollWidth - window.innerWidth;

// (no duplicate here — reusing the global extraOffset)

gsap.to(diagonalTrack, {
// x: () => -totalDiagonalScroll + window.innerWidth * 0.05 - extraOffset,
x: () => -totalDiagonalScroll + window.innerWidth * 0.05 - extraOffset,
ease: "none",
scrollTrigger: {
trigger: ".diagonal-carousel",
start: "top top",
// end: () => `+=${totalDiagonalScroll + extraOffset}`, // extend scroll distance
end: () => `+=${totalDiagonalScroll + extraOffset}`, // extend scroll distance
scrub: 1,
pin: true,
anticipatePin: 1,
invalidateOnRefresh: true,
markers: false
}
});


Подробнее здесь: https://stackoverflow.com/questions/798 ... h-n-images