Mobile version[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]
