by Guest » 16 Jan 2025, 04:59
Das Karussell meiner Website funktioniert, wenn die Website eine normale Desktop-Größe hat, z. B. 1440 Pixel breit, aber wenn ich anfange, es zu verkleinern, wird es nicht abgeschnitten, wie es auf der rechten Seite der Fall ist. Wie kann ich das beheben? Sie können das Problem in diesem Bild sehen, wo es einfach nicht abgeschnitten wird und dadurch in anderen Bereichen eine Menge Leerraum auf der Website entsteht.
[img]https:/ /i.sstatic.net/itEBQ37j.png[/img]
Code: Select all
.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]
Das Karussell meiner Website funktioniert, wenn die Website eine normale Desktop-Größe hat, z. B. 1440 Pixel breit, aber wenn ich anfange, es zu verkleinern, wird es nicht abgeschnitten, wie es auf der rechten Seite der Fall ist. Wie kann ich das beheben? Sie können das Problem in diesem Bild sehen, wo es einfach nicht abgeschnitten wird und dadurch in anderen Bereichen eine Menge Leerraum auf der Website entsteht.
[img]https:/ /i.sstatic.net/itEBQ37j.png[/img]
[code].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]
[/code]
Mobile version