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

[Anonymous]

У меня есть карусель изображений, которую я наклонил по диагонали, и теперь я хочу прокручивать изображения. Единственная проблема заключается в том, что если я добавляю в карусельную дорожку больше изображений, чем у меня есть четыре, изображения обрезаются контейнером из-за большой ширины карусельной дорожки. Как я могу изменить свой CSS или JavaScript, чтобы разместить N изображений и никогда не обрезаться?
Ниже приведен минимальный воспроизводимый пример:

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

window.addEventListener('load', () => {
if (typeof gsap === 'undefined') return;

gsap.registerPlugin(ScrollTrigger);

const diagonalTrack = document.querySelector('.diagonal-carousel .carousel-track');
if (!diagonalTrack) return;

const extraOffset = 1000; // tweak as needed

// Total distance the track needs to move horizontally
const totalDiagonalScroll = diagonalTrack.scrollWidth - window.innerWidth;

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

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

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
min-height: 200vh;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background: #050711;
color: #f5f5f5;
}

.spacer {
height: 80vh;
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
justify-content: center;
}

/* Basic button for card */
.btn.sm {
padding: 6px 12px;
font-size: 0.9rem;
border-radius: 8px;
border: none;
cursor: pointer;
}

/* === Diagonal Carousel Effect (extracted from your file) === */

.diagonal-carousel {
position: relative;
overflow: hidden;
width: 100%;
height: 120vh;
}

/* Center inside the container */
.diagonal-carousel .carousel-inner {
position: absolute;
width: 100%;
height: 100%;
display: flex;
align-items: flex-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 + diagonal tilt */
width: max-content;
padding: 0 20vw;
transform-origin: bottom right;
}

/* Each card */
.diagonal-carousel .case-card {
position: relative;
flex: 0 0 80vw;
height: 70vh;
border-radius: 24px;
overflow: hidden;
background: #181b25;
box-shadow: 0 10px 40px rgba(0,0,0,0.5);
transform-style: preserve-3d;
}

/* Image + hover zoom */
.case-card .card-image img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
transition: transform 0.5s ease;
}
.case-card:hover .card-image img {
transform: scale(1.05);
}

/* Text overlay */
.case-card .card-text {
position: relative;
z-index: 1;
padding: 32px;
max-width: 400px;
color: #fff;
backdrop-filter: blur(8px);
background: rgba(0, 0, 0, 0.45);
border-radius: 16px;
margin: 0 0 32px 32px;
}

.case-card h3 { margin: 0 0 4px; font-size: 1.4rem; }
.case-card h4 { margin: 0 0 12px; font-weight: 600; opacity: 0.85; }
.case-card p  { margin: 0 0 16px; line-height: 1.4; color: #e5e5e5; }

@media (max-width: 720px) {
.diagonal-carousel .case-card { flex: 0 0 90vw; height: 60vh; }
.case-card .card-text { padding: 20px; margin: 0 0 20px 20px;  }
}

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

Minimal Diagonal Scroll Demo










Scroll down to see diagonal carousel
Minimal demo of the diagonal scroll effect.








[img]https://images.pexels.com/photos/374870/pexels-photo-374870.jpeg[/img]

Diagonal Card 1
[h4]NUTTER BUTTER, YOU GOOD?[/h4]
This 56-year-old cookie’s rabbit hole of absurdist escapism consumed the internet.
View case





[img]https://images.pexels.com/photos/196652/pexels-photo-196652.jpeg[/img]

Diagonal Card 2
[h4]CRUNCH TIME CAMPAIGN[/h4]
A nostalgic voyage through cereal seas – reviving childhood joy for adults.
View case





[img]https://images.pexels.com/photos/66997/pexels-photo-66997.jpeg[/img]

Diagonal Card 3
[h4]LAUNCH LAB[/h4]
Experiments in motion, copy, and creative strategy for bold brands.
View case





[img]https://images.pexels.com/photos/325185/pexels-photo-325185.jpeg[/img]

Diagonal Card 4
[h4]NIGHT DRIVE[/h4]
Moody, cinematic explorations of color, light, and narrative.
View case







End of demo.

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