Side-By-Side List Section Carousel Layout - Squarespace 7.1 Tutorial

A request from Chase Hood in the Squarespace Web Designers Group on Facebook. Chase wanted to update their website with a carousel in the hero section with different images, text and button blocks. They'd tried a slideshow reel but struggled with repositioning things. So a 2-Column/Side-by-side carousel layout! My initial suggestion was to just use the great "Sliding Image Banner" plugin from my buddy Will Myers (he makes great plugins btw) which you can find here. https://www.kwameand.co/will-myers However, I also wanted to offer a pure CSS solution so I've recorded this. It's an on-the spot recording so you'll also, hopefully, be able to benefit from seeing my process/logic, which might be useful for those of you learning to write CSS for Squarespace. Code is below including a snippet that isn't in the video on how to control the 2nd line indent. Though I'll note that this isn't ideal as it'll indent ALL text in the h2 from the 2nd line. i.e. 3rd/4th line etc also. And as always, if you like the tutorials, feel free to buy me a coffee :) This is pure CSS so will work on all plans. It doesn't really require any coding knowledge so you should be abe to copy and paste pretty easily, the only change would be grabbing your own section ID with something like Will Myers' block identifier extension. ============================================= If my tutorials/tips have helped you, feel free to send me some coffee as a thank you :) https://www.kwameand.co/say-thanks Interested in more Squarespace tutorials, tips and tricks? Why not visit the SquareSkills website for more content like this: https://www.SquareSkills.dev   / squareskills     / squareskills   If you're looking for something specific, some custom design, development or coding work, you can reach out to me via my website: https://www.kwameand.co/   / heykwame     / kwameand.co   ============================================= /*********************** Squareskills.dev Side-By-Side List Section Carousel Layout *******************************/ ///target section #YOURSECTIONID { // side by side content .user-items-list-banner-slideshow .slide { flex-direction: row-reverse; @media (max-width: 767px){ flex-direction: column; gap: 0rem; } } // image styles .user-items-list-banner-slideshow .slide-media-container { position: relative; } // text styling .user-items-list-banner-slideshow .slide-content { width: 100%!important; min-width: auto!important; height: 100%!important; display: flex; flex-direction: column; margin-top: 0; @media (min-width: 768px) { justify-content: flex-end; } background-color: transparent!important; } // Heading indent (optional) .user-items-list-banner-slideshow .slide-content { margin-left: 3rem; text-indent: -3rem; } } ============================================= #squarespacetutorial #squarespacetips #squarespacewebsite #squarespacecss #squarespace #squarespaceplugin #squarespacecode #squarespacesnippet #squarespacehelp #squareskills #squarespace71 #fluidengine