Автопрокрутка Карусель не обрезается оперативно ⇐ CSS

[Anonymous]

Карусель моего сайта работает, когда веб-сайт имеет обычный размер рабочего стола, например, ширину 1440 пикселей, но когда я начинаю его уменьшать, он не обрезается, как это происходит с правой стороны. Как я могу это исправить? Вы можете увидеть проблему на этом изображении, где оно просто не обрезается и из-за этого создает кучу пустого пространства на сайте в других областях.
[img]https:/ /i.sstatic.net/itEBQ37j.png[/img]

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

.pdp-examples {
display: flex;
flex-direction: column;
align-items: center; /* Centers all children horizontally */
justify-content: center;
padding: 48px 0 72px;
background: #F2F2F2;
border-bottom: 1px solid rgba(0, 0, 0, 0.09);
}

.pdp-examples p {
margin-top: 12px;
margin-bottom: 32px;
color: var(--Subheading, #676464);
text-align: center;
font-family: "Instrument Sans";
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: normal;
}

@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(-100% - 16px));
}
}

.pdp-example-carousel-container {
padding-bottom: 32px;
max-width: 1160px;  /* or whatever container width makes sense */
margin: 0 auto;     /* centers the carousel at large widths */
overflow: hidden;   /* CRITICAL: ensures the scrolled images get clipped */
position: relative;
}
.pdp-example-carousel-container::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none; /* So mouse events pass through */
z-index: 2;           /* Ensure it's above the images */
background: linear-gradient(90deg, rgba(250, 250, 250, 0.50) 5%, rgba(250, 250, 250, 0.00) 20%, rgba(250, 250, 250, 0.00) 85%, rgba(250, 250, 250, 0.50) 95%);
}

.pdp-example-carousel {
max-width: 1160px;
margin: 0 auto;
padding-bottom: 16px;
overflow: hidden; /* Hide the overflow */
position: relative;

width: 100%;
}

.slide-track {
display: flex;
white-space: nowrap;
animation: scroll 50s linear infinite;
gap: 16px; /* Add gap between images */
}

.pdp-carousel-slide {
width: 169px;
height: 169px;
flex-shrink: 0; /* Prevent shrinking of slides */
}

.pdp-carousel-slide img {
max-width: 100%;  /* shrinks if needed */
height: auto;
display: block;
}

/* Clone the first item at the end using ::after */
.slide-track::after {
content: "";
display: inline-block;
width: 169px;  /* Same as slide width */
height:  1 6 9 p x ; < b r   / > } < / c o d e > < b r   / > < p r e   c l a s s = " s n i p p e t - c o d e - h t m l   l a n g - h t m l   P r e t t y p r i n t - o v e r r i d e " > < c o d e >                         & l t ; s e c t i o n   c l a s s = " p d p - e x a m p l e s " & g t ; < b r   / >                                 & l t ; h 2 & g t ; E x a m p l e s & l t ; / h 2 & g t ; < b r   / >                                 & l t ; p & g t ; T h e   t y p e   o f   s h i t   f l o w s c o p e   c a n   m a k e & l t ; / p & g t ; < b r   / >                                 & l t ; s e c t i o n   c l a s s = " p d p - e x a m p l e - c a r o u s e l - c o n t a i n e r " & g t ; < b r   / >                                 & l t ; d i v   c l a s s = " p d p - e x a m p l e - c a r o u s e l " & g t ; < b r   / >                                         & l t ; d i v   c l a s s = " s l i d e - t r a c k " & g t ; < b r   / >                                                 & l t ; d i v   c l a s s = " p d p - c a r o u s e l - s l i d e " & g t ; < b r   / >                                                         & l t ; i m g   s r c = " / F l o w s c o p e / i m g / e x a m p l e s / e x a m p l e - 1 . p n g "   h e i g h t = " 1 6 9 "   w i d t h = " 1 6 9 "   a l t = " "   / & g t ; < b r   / >                                                 & l t ; / d i v & g t ; < b r   / >                                                 & l t ; d i v   c l a s s = " p d p - c a r o u s e l - s l i d e " & g t ; < b r   / >                                                         & l t ; i m g   s r c = " / F l o w s c o p e / i m g / e x a m p l e s / e x a m p l e - 2 . p n g "   h e i g h t = " 1 6 9 "   w i d t h = " 1 6 9 "   a l t = " "   / & g t ; < b r   / >                                                 & l t ; / d i v & g t ; < b r   / >                                                 & l t ; d i v   c l a s s = " p d p - c a r o u s e l - s l i d e " & g t ; < b r   / >                                                         & l t ; i m g   s r c = " / F l o w s c o p e / i m g / e x a m p l e s / e x a m p l e - 3 . p n g "   h e i g h t = " 1 6 9 "   w i d t h = " 1 6 9 "   a l t = " "   / & g t ; < b r   / >                                                 & l t ; / d i v & g t ; < b r   / >                                                 & l t ; d i v   c l a s s = " p d p - c a r o u s e l - s l i d e " & g t ; < b r   / >                                                         & l t ; i m g   s r c = " / F l o w s c o p e / i m g / e x a m p l e s / e x a m p l e - 4 . p n g "   h e i g h t = " 1 6 9 "   w i d t h = " 1 6 9 "   a l t = " "   / & g t ; < b r   / >                                                 & l t ; / d i v & g t ; < b r   / >                                                 & l t ; d i v   c l a s s = " p d p - c a r o u s e l - s l i d e " & g t ; < b r   / >                                                         & l t ; i m g   s r c = " / F l o w s c o p e / i m g / e x a m p l e s / e x a m p l e - 5 . p n g "   h e i g h t = " 1 6 9 "   w i d t h = " 1 6 9 "   a l t = " "   / & g t ; < b r   / >                                                 & l t ; / d i v & g t ; < b r   / >                                                 & l t ; d i v   c l a s s = " p d p - c a r o u s e l - s l i d e " & g t ; < b r   / >                                                         & l t ; i m g   s r c = " / F l o w s c o p e / i m g / e x a m p l e s / e x a m p l e - 6 . p n g "   h e i g h t = " 1 6 9 "   w i d t h = " 1 6 9 "   a l t = " "   / & g t ; < b r   / >                                                 & l t ; / d i v & g t ; < b r   / >                                                 & l t ; d i v   c l a s s = " p d p - c a r o u s e l - s l i d e " & g t ; < b r   / >                                                         & l t ; i m g   s r c = " / F l o w s c o p e / i m g / e x a m p l e s / e x a m p l e - 7 . p n g "   h e i g h t = " 1 6 9 "   w i d t h = " 1 6 9 "   a l t = " "   / & g t ; < b r   / >                                                 & l t ; / d i v & g t ; < b r   / >                                                 & l t ; d i v   c l a s s = " p d p - c a r o u s e l - s l i d e " & g t ; < b r   / >                                                         & l t ; i m g   s r c = " / F l o w s c o p e / i m g / e x a m p l e s / e x a m p l e - 8 . p n g "   h e i g h t = " 1 6 9 "   w i d t h = " 1 6 9 "   a l t = " "   / & g t ; < b r   / >                                                 & l t ; / d i v & g t ; < b r   / >                                                 & l t ; d i v   c l a s s = " p d p - c a r o u s e l - s l i d e " & g t ; < b r   / >                                                         & l t ; i m g   s r c = " / F l o w s c o p e / i m g / e x a m p l e s / e x a m p l e - 9 . p n g "   h e i g h t = " 1 6 9 "   w i d t h = " 1 6 9 "   a l t = " "   / & g t ; < b r   / >                                                 & l t ; / d i v & g t ; < b r   / >                                                 & l t ; d i v   c l a s s = " p d p - c a r o u s e l - s l i d e " & g t ; < b r   / >                                                         & l t ; i m g   s r c = " / F l o w s c o p e / i m g / e x a m p l e s / e x a m p l e - 1 0 . p n g "   h e i g h t = " 1 6 9 "   w i d t h = " 1 6 9 "   a l t = " "   / & g t ; < b r   / >                                                 & l t ; / d i v & g t ; < b r   / >                                
[img]/Flowscope/img/examples/example-11.png[/img]

[img]/Flowscope/img/examples/example-12.png[/img]

[img]/Flowscope/img/examples/example-13.png[/img]

[img]/Flowscope/img/examples/example-14.png[/img]

[img]/Flowscope/img/examples/example-15.png[/img]






[img]/Flowscope/img/examples/example-8.png[/img]

[img]/Flowscope/img/examples/example-9.png[/img]

[img]/Flowscope/img/examples/example-10.png[/img]

[img]/Flowscope/img/examples/example-11.png[/img]

[img]/Flowscope/img/examples/example-12.png[/img]

[img]/Flowscope/img/examples/example-13.png[/img]

[img]/Flowscope/img/examples/example-14.png[/img]

[img]/Flowscope/img/examples/example-15.png[/img]

[img]/Flowscope/img/examples/example-1.png[/img]

[img]/Flowscope/img/examples/example-2.png[/img]

[img]/Flowscope/img/examples/example-3.png[/img]

[img]/Flowscope/img/examples/example-4.png[/img]

[img]/Flowscope/img/examples/example-5.png[/img]

[img]/Flowscope/img/examples/example-6.png[/img]

[img]/Flowscope/img/examples/example-7.png[/img]

Подробнее здесь: https://stackoverflow.com/questions/793 ... ly-cut-off