dsunnock

Currently all of the photos are single photo blocks with an overlay on the photos in the background. I'm trying to find code that will allow me to do an animated carousel. I don't want a snap, rather a smooth scrolling look. https://marlin-springtail-2kjm.squarespace.com/home PW: hello

I was able to fix it. I ran my CSS through ChatGPT and it found the issue. The thing I'm still trying to figure out is the 3D looking carousel.

What I'm trying to do is make a infinite scrolling photo carousel with one photo on top that doesn't move. I need it to look good on mobile and desktop but for some reason it keeps cutting off my photos or repeating it in rows. Bonus points if someone knows how to do this and make it autoscroll: I used this tut to make the scrolling effect: https://www.youtube.com/watch?v=xsq_c8vaIs0 The reason I used this instead of a gallery block or gallery section is that I wanted a "main photo" and more options for H1 and so on. My website: https://marlin-springtail-2kjm.squarespace.com/home-mobile#4 PW: hello My CSS: // FULL WIDTH SECTION section[data-section-id="667472b2cde3e96be6fef43c"] { overflow-x: hidden !important; overflow-y:hidden !important; } section[data-section-id="667472b2cde3e96be6fef43c"] { .content-wrapper { padding: 0px !important; margin: 0px auto; display: contents; } .sqs-layout .sqs-row .sqs-block { padding-bottom: 0px !important; padding-top: 0px !important; } } .slider .slider-image { background-image: url(https://static1.squarespace.com/static/6656326cb5e8fe4f069d15a8/t/6678524a407be66f5c78039f/1719161419904/Background.png); opacity: 0.5; height: 300px; background-size: auto; animation: slide 150s linear infinite; } @keyframes slide { from {background-position-x: 2234px;} to {background-position-x: 0px;} }

https://marlin-springtail-2kjm.squarespace.com/ PW: hello

I'm trying to make the image cards on my website look like the image cards on my figma file. PW: victory Current CSS code // Auto Carousel List - Card Border Radius // .user-items-list-carousel .list-item { border: 2px solid #eee; border-radius: 20px !important; } /* Hide controls on native video player */ .video-player .plyr .plyr__controls { display: none; } // Rounded corner on Video Player // .video-player .plyr video { object-fit: cover !important; border-radius: 20px !important; } // Rounded corner on image blocks // .user-items-list-carousel .list-item img { border-radius: 20px !important; } // Vertical Video Player // .sqs-native-video .native-video-player { padding-bottom: 80% !important; } #block-yui_3_17_2_1_1716925040398_5141.video-block .video-player{ padding-bottom: 120%; border-radius: 20px !important; } // Scroller Cards // section[data-section-id="665720dceda419650c4267d7"] { --item-width: 270px; --additional-offset: 0px; .user-items-list-carousel__gutter { padding-left:0px !important; padding-right:0px !important; } .user-items-list-carousel__slides { overflow-x:scroll; grid-template-columns:unset !important; grid-auto-columns:var(--item-width); cursor: auto; padding-left:~'calc(var(--offset-left) + var(--additional-offset))'; -ms-overflow-style: none; scrollbar-width: none; } .user-items-list-carousel__slides::-webkit-scrollbar { display: none; } .list-item { transform: unset !important; grid-row: 1; grid-column: unset; pointer-events:unset; user-select: unset; cursor: auto; } .desktop-arrows, .desktop-arrows{ display: none !important; } } [class*="mobile-arrow"] { display: none !important; }