⚠️ IMPORTANT CSS UPDATE ⚠️ When logging into Squarespace, if you see the word "Website" at the top of your menu, you are using their new internal navigation! To edit the CSS of your Squarespace website, click on the word "Website" and scroll to the bottom of the list of pages. Here you'll see "Website Tools" - click on that option and select "Custom CSS" to open the CSS panel and add your code here. For more information, watch this tutorial: ruclips.net/video/euJqHXs_L1M/видео.html
This is great! Thank you! I wish there was a way to have it infinity scroll, like the first image following the last, but for most use cases, mine included, this is great!
Technically the animation is infinite! If you can't get it to repeat, try adjusting the keyframe percentage so it wont go so far off the screen, or adding your images more than once and increasing that keyframe percentage.
Something to note that took me a while to troubleshoot and might help someone else out: If you want two scrolling slideshows on your website with different variables for speed and length, first copy and paste the code twice and input different sections in front of the corresponding .gallery-grid-wrapper like she explains in the video. Then what I learned is where you see the word "slideshow" in 2 places (animation: slideshow and @keyframes slideshow) that is a variable, and you need to name it something new (slideshow2, photos2, etc.) on the second slideshow.
Also adding a comment for infinite looping here! I was having an issue where my gallery would glitch start over from the beginning, so I added images one two and three again and adjusted the timing and keyframe percentages until it was perfectly lined up. It's technically still "restarting" but by the time those repeat images show up on the very left, it is perfectly restarted to the original first three images so that restart glitch isn't visible. I will say that this is entirely dependent on how many images and columns you have too (as in how many images are visible on your screen from left to right, mine happens to be 3 image screen width). Anyway, just something that is definitely fixable with a lot of little tweaks!
@@InsideTheSquare awesome! Very excited. I do have a question though, do you think it can be done with CSS or do I need to use JS? Does Squarespace have JS integration?
@@azncowman We can add JS to Squarespace, and we'll definitely need it for this function, but I think we can achieve it with client-facing js so we don't have to use any external servers. I'm up for the code challenge 😉
Hi, incredible tutorial, very grateful. One question, why is my carousel like jumping / resetting versus ideally it being a smooth infinite scroll. Thank you
Intersting - I would try adjusting the margin percentage to see if that is causing the issue 🤔 if it's still acting up, send me a link and I'll take a look (support--at--insidethesquare.co)
That's a great question but it would require some extra fancy javascript. if you want me to create a code for you, you can request one here: insidethesquare.co/code-help
Great question! We can't add one to the gallery section, but you can add a section above it, remove the padding (toggle off "fill screen") and then make sure it's the same color theme as your gallery section so the background *appears* to be seamless. Hope this workaround helps, and best of luck with your project!
This code was super helpful! I'm just having issues resizing the gallery grid width for mobile. I've played around with the media query and can't seem to scale the image sizing up so the images don't appear so small when viewing the auto scroll gallery on mobile. Any coding help you can offer? Thank you!
ooh mobile is tricky! I would recommend adjusting the height of the whole section on mobile so that the images. I don't have a code for that just yet, but i'll add it to my to do list so stay tuned :)
Great tutorial Becca, thanks! It's a total game changer for my portfolio website. I've definitely been trying to resize the images up for mobile. Looking forward to seeing your solution!
@@InsideTheSquare I'm unable to adjust the height of that section on mobile (or desktop either). The vertical height slider is not displaying for that section for some reason.
This will fix the mobile resize. Adjust as needed @media only screen and (max-width:640px) { .gallery-grid-wrapper { display:flex !important; animation: slideshow 30s linear infinite } .gallery-grid-wrapper .gallery-grid-item { min-width: 22% !important; margin-top: 2% !important; }
Thanks Becca a lot for this tutorial ! I'd like to know if you encounter the problem of jittery when images are moving to the left, the horizontal scroll works great in my site but it seems that the images border are flickering, a bit laggy when moving, how would you fix this problem?
Interesting! That sounds like a load lag issue; potentially an issue with the size of the images but it's hard to say without seeing it in action. Feel free to send me a link and I'll take a look: support-at-insidethesquare.co
Hi! This tutorial was incredibly helpful, thank you so much. I would only like the scroll to happen on the homepage however, I see it affects the other pages with gallery images. How do I keep to just the home page? Thanks!
This is definitely a digital duck tape workaround for that kind of feature, but doubling the images & increasing the negative margin can help make it look longer to the user!
That is such a cool idea - and yes! You'll want to create second animation so you can switch up the direction like this. In this code, section 1234 goes from right to left using the keyframe "slideshow1" while section 9876 goes from left to right, using the keyframe "slideshow2" [data-section-id="1234"] .gallery-grid-wrapper { display:flex !important; animation: slideshow1 30s linear infinite } [data-section-id="9876"] .gallery-grid-wrapper { display:flex !important; animation: slideshow2 30s linear infinite } [data-section-id="1234"] .gallery-grid-wrapper .gallery-grid-item, [data-section-id="9876"] .gallery-grid-wrapper .gallery-grid-item { min-width: 50%; margin-right: 5% } @keyframes slideshow1 { 0% { left: 0; } 100% { left: -225%; } } @keyframes slideshow2 { 0% { left: 0; } 100% { left: 225%; } }
Hello! This tutorial was very intuitive and helpful -- thank you!! But, my images (logos) are being cropped and I have no clue how to fix this. Do I need to add a custom code to make them fit? I've resized them in Illustrator per Squarespace image guidelines and they are still being cropped. Help please!! Thank you! Shauna
That's a great question! We can use code to force an image to fit inside the container, no matter what size it is. Update the data section ID in this code to make it work: section[data-section-id="123456789"] img{object-fit:contain!important}
This is super helpful. Thanks! Some of my images are cropped, even after playing with the aspect ratios in the settings and the min-width % in the script. Is there another way to adjust the size of images that run long horizontally so they fit in the container?
Thank you Becca! This is really helpful. By the way, I've been trying to figure out how I could make a background transparent/ or replace a background with an image. Could you please help? I'd really appreciate 🙏
This is such a great question! I think it's kinda wild that Squarespace wont let us use a background image for this type of section; why this one?! 🫠 I don't have a code for it just yet but I'll add it to my to do list - stay tuned.
Hi, is there a way to adjust the size only on the phone version? Because to get the perfect size on the phone, on the desktop it will be too big. Thanks!
Great question! You can try creating two sections - one perfect for mobile and the other for desktop. Here is a tutorial that can help: ruclips.net/video/AQnwhitEqnI/видео.html
Hey Becca! Thank you so much for this help! If I wanted to put a second gallery underneath and have it scroll the opposite direction, would you have tips for that? I figured out how to reverse the direction, but can't get them to do opposite ways, if one goes right the other wants to as well, even with the section data. :) Happy Holidays!
That's a really cool idea! I havent tried it yet, but you could create a second slideshow animation and change the word left to right. The trick is to rename it so you reference the right one. Give this code a try - updating the data section id's - and let me know how it goes! #page { overflow-x:hidden } .gallery-grid-wrapper .gallery-grid-item { min-width: 50%; margin-right: 5% } @keyframes slideshow-left { 0% { left: 0; } 100% { left: -225%; } } @keyframes slideshow-right { 0% { left: 0; } 100% { left: -225%; } } #left-one .gallery-grid-wrapper { display:flex !important; animation: slideshow-left 30s linear infinite } #right-one .gallery-grid-wrapper { display:flex !important; animation: slideshow-right 30s linear infinite }
hey, not sure if you're still checking this but i have a question. i noticed squarespace was purposefully lowering the quality of my pictures in the gallery as part of their optimisations, is there a way to bypass these optimisations? thanks!
That is super strange - it shouldn't effect image quality at all. I'd reach out to Squarespace support to see if there is an issue with your file upload.
This will fix the mobile resize. Adjust as needed @media only screen and (max-width:640px) { .gallery-grid-wrapper { display:flex !important; animation: slideshow 30s linear infinite } .gallery-grid-wrapper .gallery-grid-item { min-width: 22% !important; margin-top: 2% !important; }
Thanks Becca, this is super helpful! I am still playing around with it, but is there a simple line of code that could be added to make the image have rounded corners like the rest of the images on our site? I played around with adding "border-radius: 10px!important;" but it doesn't seem to have any effect on the images. Thanks for your help!
That is a great question, and your code was so close!! The reason it didn't do anything was the selector. We need to add the border radius change to the image inside the container, so if you add three more letters to your code and you'll be all set 🙌 .gallery-grid-item img { border-radius: 10px!important}
@@InsideTheSquare Thank you!! That worked perfectly. I had tried to tuck it in together under .gallery-grid-item and that was not happening :) Coffee's on me!
Hi becca, thanks for this. Is there a way to expand the number of images in the gallery loop? At the momentI can only get to 6 columns and that means quite a small scroll. Any thoughts? Thanks again! Rohan😀
Great question Rohan! I set this up on my cheat sheet landing page and ended up using 18 in total. Just make sure you adjust the time (s for seconds)and the width so it looks perfect for your image ratio :)
@@InsideTheSquare Hi Becca, I just bought the cheat sheet but can't find where the details for setting up a version with more images. Where is the best place to find that information? Thanks!
When I add this code, for some reason it disables the new 'PIN' Blocks feature on Squarespace. I even have the sections set to their own IDs. Any solutions?
That is super strange - shouldn't be related to that at all, so i'm wondering if you have other code before/after that this is disrupting. Can you share a link or paste all of your code here? Happy to help!
Thank you so much for your help with this! Improved our website home page significantly. Is there any way to do different scaling of the gallery for mobile and for desktop? The images appear to small on mobile, but if I increase the width, the desktop get too big. Thanks!
Great question! You can set up media queries to change values for specific screen sizes. I've got some more info on how to do that here: insidethesquare.co/mobile
This worked great. Only I wanted it only one one page of my website. Now all my gallery blocks on the other pages are also scrolling which I did not want. How to I fix it so just be one one page?
I did paste in the correct section ID right before the .gallery-grid-wrapper which worked for the other pages I did not want the animation but now the homepage is also static which is where I do want the animation. I either have all or nothing. What am I doing wrong?
It's hard to say without seeing your code - maybe you need a space between the data section id and the selector? maybe you didn't close your code? I honestly cant tell from a comment. Feel free to email me a link (support-at-insidethesquare.co) and if your site isn't live, make sure your site is set to password protected before you do so I can actually see it (settings -> site availability -> password protected)
The "infinite" part of the animation is supposed to make that happen, but it's not seamless yet. I'll keep brainstorming other creative ways to make this work; stay tuned! :)
@@InsideTheSquare any updates on this? I'm using this code now and having this issue. I've played with the timing and the keyframes numbers, and also duplicated the photos and I'm still having a big gap at the end of the animation.
@@heatherlynngonzalez7824 have you tried adjusting the keyframe left value from -225 to something smaller so it doesn't go so far off the screen? Anything over -150 will be enough to get some scroll effect. @keyframes slideshow { 0% { left: 0; } 100% { left: -150%; } }
Thanks Becca! Very helpful. I have a lot of photos in my gallery and it seems to restart after 30 seconds and doesn't show all my photos. Is there anyway to have all photos in my gallery included?
Great question! You can totally use a media query to increase the height on smaller screens. Here is an article with more info: insidethesquare.co/mobile
This is a great question! Video galleries are built on a different grid system, but with some clever code we could make it work. I'll add this to my tutorial to do list, but if you nee it ASAP, you can request a custom code here: www.insidethesquare.co/code-request
This was super helpful - thank you so much. It'd be great to get some guidance on the mobile layout if possible? I have a logo slideshow that either looks great on desktop, but minuscule and illegible on mobile, or great on mobile, but large and oversized on desktop. So grateful for your support 🙏🏻
@@InsideTheSquare Thank you so much ❤ I wonder is there any way to 'clip' the carousel at the frame of mobile resolution parameters, rather than it continue hidden out of frame? With this solution, if users attempt to scroll the images from right to left to see more of the images, the full-desktop-width of images becomes visible which 'breaks' the framing in a mobile browser. I'd love to hear your thoughts 🙏🏻
Hello, love this code but for some reason once I apply it, all the tabs that have pictures in it keep rotating. Just wanted to have it on the main page. I also tried applying the section code before the gallery and it either stops them all from moving or makes all the pictures disappear. Please help. Appreciate it.
You'll want to isolate a single gallery section using it's data section id! Check out this article for more info: insidethesquare.co/resources/squarespace-id-finder-2024
Thanks so muuch for this tutorial! Super helpful! ...But am I the only one who's overflow is still visible? I've looked over the code carefully, but #page { overflow-x:hidden } isn't hiding the overflow. Has anyone else run into this issue?
Problem solved! If anyone else experinced something similar it was becasue I tried using this code after a section ID which interfered. Removing the section ID hid the overflow 👍🏻
Its helpful. But I adjusted everything as per desktop screen - however, on mobile the auto-flow images are very small in size. Is their any responsive adjustment for it? Please advise
Great question -there is a responsive way to code anything in Squarespace, including this! Here is a tutorial with more info: :insidethesquare.co/squarespace-tutorials/gallery-section-mobile-size
This will fix the mobile resize. Adjust as needed @media only screen and (max-width:640px) { .gallery-grid-wrapper { display:flex !important; animation: slideshow 30s linear infinite } .gallery-grid-wrapper .gallery-grid-item { min-width: 22% !important; margin-top: 2% !important; }
I'm using the code as described in the video, and i'm using PNGs with a transparent background but the images don't resize to fit so they are all showing as cropped... is there anything that can be added to prompt them to show the whole image rather than crop large sections? Thanks :)
Unfortunately the frame that Squarespace places the image has to be the same ratio for all images in the gallery. One thing that I've done in the past is create a canvas of the ratio I need, then center my PNG's on that canvas vertically and horizontally so they are aligned. Probably not the answer you wanted, but I hope it helps! Best of luck with your project :)
My images are cropped and the aspect ratios provided from the gallery aren't fitting :\ The "min-width" changes the size, but the images are still cropped. Any code for this?
So, this is not what I recall as horizontal scrolling. On this, there are definite boarders between the photos. How do you set it up so there are no borders between the photos that are scrolling?
Hi! I love this and it works flawlessly! My images are pixelated and look slightly blurry when using the scrolling gallery - any tips on that? Thank you!
Intersting! I know Sqsp has been making some adjustments to image storage lately; I'd clear your cache and try it again in a few days to see if it "fixes" itself. 😉
I'm getting the same issue as well. My images are so blurry that I can't really use them. I cleared the cache and it's still the same. The latest images I uploaded are 3163x2372, which I think is an overkill for websites. Any thoughts? Thank you!
Hi Becca - this is great thank you. Quick question, I only want to apply this to the gallery on my home page but even when I put in the section ID - section[data-section-id="664dfaf7c3a89904185c92b0"] - before the code, it continues to apply it to all galleries on my website. What an I doing wrong? Thank you.
I've just re-watched the tutorial and I was putting the ID at the top of the code section rather than before each gallery-grid-wrapper - doh! Thanks again, love these tutorials!
Glad you were able to figure it out - that kind of "ah-ha" moment is what got me hoooked on creating custom code 🙌 Congrats on this one and best of luck with your project :)
Hey quick question, if i wanted to give the impression of an infinitate loop (e.g. not restarting) would i just duplicate all the images / list again to extend this out please?
Great question! You can increase or reduce the size of the offset, add a second set of images, and change the duration. All of that requires a little extra fine-tuning based on the size of your images and sections, but it should help!
Hello Becca, Thank you so much for such a great tutorial. I was looking for this for a long time and your video made it so great and easy for me. I have problem however. On mobile the height of my gallery is so small. I would love for it to take 50 or 60 vh. I tried your tutorial from changing gallery height to no avail. Would you be able to help me with this please? Thank you very much!
Squarespace changes the "name" of page sections all the time, which makes a simple question like this a little more confusing than it should be 😬 Portfolios are a type of collection page, and they don't have a carousel display option for the projects in the collection. Page sections have a new category that says "portfolio" but its really just the same page sections we have always had: fluid, list, gallery, and classic. Most of the sections in the "portfolio" category are fluid *except* for the ones that have this icon: ⓘ That's an indicator of an auto layout section; list or gallery. List and gallery used to have their own section, but Squarespace removed those categories about a month after they made them. List's have a carousel option - galleries do not. Soooooo -TLDR: if you see a carousel display option - that's a list section, and that's what were using in this tutorial. You'll find those auto layouts inside the people sections, portfolio sections, services, and testimonials. Just look for the ⓘ icon. 🫠
@@InsideTheSquare Thanks for the reply. I went ahead with the simply gallery and it looks great on web but in mobile the images are really small. Is there a way to set different sizing and speed on mobile or is it just "try to find a happy medium"? Again, thnk you so much for your help!
Seems to be limited. Is there any way to make this code work for Gallery Type > Slideshow: Reel? This code seems to only work for select Gallery options...
Hi is there a way i can add title / paragraph above the scrolling animation please i currently have a title but it is a massive gap between the animation and the title so would like it to be 10 pixels apart
There are a few different ways, but one of the easiest would be to use a banner list section. These show a title and/or description above the image and you can scroll through it. You'll find list sections under the "people" page sections right now... Sqsp moves them around sometimes so I hope they are still there when you look for them 🤞😅
Thanks so much for this! I've added the code. It's working great. However, the infite stroll has a hug gap after the last logo and continues to scroll for a bit until it shows the first logo again. Could you please help?
Great question! You can isolate an individual part of your site by using its block id, or in your case, data section id. Here is an article & tutorial video with more info: insidethesquare.co/resources/squarespace-css-targeting-tips
You'll need to add a little more code-- this tutorial should be able to help you out. It will teach you how to create an alternate layout for mobile: ruclips.net/video/AQnwhitEqnI/видео.html
You’re not doing anything wrong! Squarespace changes their menu all the time; too fast for me to keep updating my tutorial videos! 😂 try looking under website > pages > website tools > custom css
Is it possible to create this but without it automatically scrolling? So if people using your site on their phone could swipe through the blocks, but the blocks not automatically moving? I'm trying to create this for a sort of navigation panel at the bottom of my site where each individual photo links to a project page on the website, so people can swipe through and choose which project page they want to visit.
Absolutely - you dont need to have the scroll feature at all! Just skip the code and use an auto layout like a list section or gallery section. Here is a podcast episode with more info about those section types so you can be sure you're picking the right one for your project: insidethesquare.co/podcast/03
If that’s all you need, I’d recommend creating a gif! You can use a program like canva to have any timed animation you want on a loop and you don’t have to create code for any interaction 👍👍
Hey Becca! This is SO helpful! I'm having a hard time finding a tool that will allow me to save my photos with the needed aspect ratio and transparent background. Everything I have tried just wants to crop the photo to that aspect ratio which isn't what I'm wanting. I've tried Photos on my Mac as well as Preview and Canva. Any ideas?
This is a great question! I have a workaround I’ve used via Canva. Set up a specific size canvas and then add your images in the ratio you want, then export as a PNG with a transparent background. The canvas/files will all be the same dimensions but the images will keep their own ratio. Hope that idea helps and best of luck with your site!
Please help! How can I make a section move in the opposite direction? I'm trying to add one underneath and copying both section ID codes, but they both are showing up as static.
A product page does not allow us to add a new section. So now we are left with an issue with a carousel that moves 50% of the image when the user clicks next.
This technique is specifically for an auto layout section. Additional product info uses classic editor content blocks. I don’t have a tutorial for this specific animation for any classic section content block but I can add it to my to do list!
Great question - you're in the right place! Just hit enter/return to start a new line and add additional code. Pro tip: make sure you closed your last code bracket before you start a new one, so your last line should end in }
Hey Becca! I hope you can help me with this, I did two sections one after the other so I can use one for desktop and one for mobile, it seems that the keyframes in the second section also affect the first section (it keeps going until it disappears and then after a couple of seconds starts back again and If I delete the second section then it's fine) I've checked that I added the correct section data before both .gallery-grid-wrapper's.
That's so strange - especially since you are using the dat section id! Can you send me a link? I'm happy to take a look at your source code to try to track down the problem: insidethesquare.co/contact
how do you stop it from looking like the looping is obvious? I want the first image of the slideshow to automatically roll after the last image. Is this possible?
Hey Maiya! Play around with adjusting the time and consider duplicating or even tripling the images you use to make it last much longer before the reset.
Thanks, Becca! You create such great content and I so appreciate it. (I was so excited when I saw this video pop up in my notifications - I've been trying to figure out how to do this without a plugin). I'm wondering if there is a way to customize the height of the gallery - would that be margin-top and margin-bottom or height in vh? e.g height: 45vh !important;
For some reason not all of my images are showing, it gets 3/4 of the way through and immediately cycles back to the beginning without showing the remaining 10 out of 35 logos. I've tried increasing the time to 60s and 90s and that didn't help.
The time is just the speed - what you need to do is make space for all of your images!! Left:-225% fits the 6 on my site; try increasing that value until all of yours fit. Also, consider creating a gif instead - you’re processing an animation for 30 images, and one gif would load so much faster. Hope that I info helps and best of luck!
I have no idea - could be the load time, your connection, or the auto compression. If it happens on other devices & internet connections, you should reach out to Squarespace for support.
im having trouble keeping one gallery sliding and one gallery still. anyone else have problems with this? I followed the tutorial exactly but whenever i paste the section ID all my galleries just stop scrolling :(
You need to place the id before both selector classes in the code, like this: #page { overflow-x:hidden } #block-1234 .gallery-grid-wrapper { display:flex !important; animation: slideshow 30s linear infinite } #block-1234 .gallery-grid-wrapper .gallery-grid-item { min-width: 50%; margin-right: 5% } @keyframes slideshow { 0% { left: 0; } 100% { left: -225%; } } You can also add !important to your values. For other troubleshooting tips, I've got a free guide at insidethesquare.co/sos
Never mind, I saw another video where you used ID finder extension and sort that out, is important modified the "slideshow" and that works. thank you and great content
It will loop infinitely (animation: slideshow 30s linear *infinate*) so all you need to do is adjust the values to suit your image display size like I show in the video. 👍👍
@@InsideTheSquare I mean it doesn't loop all the way around with these settings. I'll never see the final image and the first image on the screen at the same time in a complete cycle. it just gets to the end, then immediately starts over, it's not seamless
Is there a shortcut to apply this to only one page/section? It's currently applying to all my pages and gallery sections. Edit: Solved by adding the section ID to each of the Gallery Grid lines of code: #page { overflow-x:hidden } .page-section[data-section-id="64c5af6223030a605d50cfd9"] .gallery-grid-wrapper { display:flex !important; animation: slideshow 30s linear infinite } .page-section[data-section-id="64c5af6223030a605d50cfd9"] .gallery-grid-wrapper .gallery-grid-item { min-width: 50%; margin-right: 5% } @keyframes slideshow { 0% { left: 0; } 100% { left: -225%; } }
@@InsideTheSquare Thank you. Is there a way to change the width for mobile and desktop separately ? The "min-width: 50%;" makes my gallery large on desktop and tiny on mobile.
Hey Sarah! I used a standard the CSS animation property that includes infinite scroll. Give it a try and if it doesn't work out, let me know! Best of luck!
⚠️ IMPORTANT CSS UPDATE ⚠️ When logging into Squarespace, if you see the word "Website" at the top of your menu, you are using their new internal navigation!
To edit the CSS of your Squarespace website, click on the word "Website" and scroll to the bottom of the list of pages. Here you'll see "Website Tools" - click on that option and select "Custom CSS" to open the CSS panel and add your code here. For more information, watch this tutorial: ruclips.net/video/euJqHXs_L1M/видео.html
This is exactly what I needed for my church's website and I got it running in about 10 minutes. Thank you!
You’re so welcome - happy to help! ☺️
Almost 9 months later and this still works like a charm. Thank you so much for making this!
You're so welcome - happy to help!
This is great! Thank you!
I wish there was a way to have it infinity scroll, like the first image following the last, but for most use cases, mine included, this is great!
Would love to have it infinitely scroll as well
Technically the animation is infinite! If you can't get it to repeat, try adjusting the keyframe percentage so it wont go so far off the screen, or adding your images more than once and increasing that keyframe percentage.
found this and had a grid looking and moving exactly how I wanted it in maybe 6 minutes. unbelievable - thanks!
You're welcome; happy to help!
YOU ARE THE SQUARESPACE GURU!!!
Thank you!! 🥰
This is so great! You make it look easy to follow. Thanks for the hand-holding!!!
You're so welcome! 🥰
Haven’t played with vanilla css animations in a while!! Incredible video!
Thanks!! CSS is such a great way to make a good Squarespace website a great one 😉
Something to note that took me a while to troubleshoot and might help someone else out:
If you want two scrolling slideshows on your website with different variables for speed and length, first copy and paste the code twice and input different sections in front of the corresponding .gallery-grid-wrapper like she explains in the video. Then what I learned is where you see the word "slideshow" in 2 places (animation: slideshow and @keyframes slideshow) that is a variable, and you need to name it something new (slideshow2, photos2, etc.) on the second slideshow.
This is a great tip - thanks for sharing!
This was super helpful!! Thanks!!
Also adding a comment for infinite looping here!
I was having an issue where my gallery would glitch start over from the beginning, so I added images one two and three again and adjusted the timing and keyframe percentages until it was perfectly lined up. It's technically still "restarting" but by the time those repeat images show up on the very left, it is perfectly restarted to the original first three images so that restart glitch isn't visible.
I will say that this is entirely dependent on how many images and columns you have too (as in how many images are visible on your screen from left to right, mine happens to be 3 image screen width). Anyway, just something that is definitely fixable with a lot of little tweaks!
Fantastic! I love your creative problem solving - this level of curiosity & perseverance is what makes a good Squarespacer great 😊
Exact same issue, thank you for saving me time troubleshooting!!
Anyway to make the automatic scrolling pause on hold/click for both mobile/desktop?
Great question! I don't have a code for that function, but I can absolutely add it to my to do list. Stay tuned :)
@@InsideTheSquare awesome! Very excited. I do have a question though, do you think it can be done with CSS or do I need to use JS? Does Squarespace have JS integration?
@@azncowman We can add JS to Squarespace, and we'll definitely need it for this function, but I think we can achieve it with client-facing js so we don't have to use any external servers. I'm up for the code challenge 😉
@@InsideTheSquare looking forward to it!
This is amazing, your tutorials are so helpful!
You’re welcome! Happy to help. 😎
Thanks Becca. Your tutorials are always helpful.🙏
You’re welcome! Happy to help. 😎
Hi becca, thanks for this video. when all immages were showed the animation restart roughly restarting from the first immage. How to avoid this ?
If you want it to restart from a different position, you can always add the images again! Hope that workaround helps with your project.
works like a treat! thanks for this! 🤩
You're welcome 😊
This was amazing thank you!
You're welcome! ☺️
Hi, incredible tutorial, very grateful. One question, why is my carousel like jumping / resetting versus ideally it being a smooth infinite scroll. Thank you
Intersting - I would try adjusting the margin percentage to see if that is causing the issue 🤔 if it's still acting up, send me a link and I'll take a look (support--at--insidethesquare.co)
This was super helpful thank you! I do have one question - is there a way to add in a 3second pause on each image?
That's a great question but it would require some extra fancy javascript. if you want me to create a code for you, you can request one here: insidethesquare.co/code-help
Hello i added this and i love it, though is there a way to add a text box to the top?
thanks!
Great question! We can't add one to the gallery section, but you can add a section above it, remove the padding (toggle off "fill screen") and then make sure it's the same color theme as your gallery section so the background *appears* to be seamless. Hope this workaround helps, and best of luck with your project!
This code was super helpful! I'm just having issues resizing the gallery grid width for mobile. I've played around with the media query and can't seem to scale the image sizing up so the images don't appear so small when viewing the auto scroll gallery on mobile. Any coding help you can offer? Thank you!
ooh mobile is tricky! I would recommend adjusting the height of the whole section on mobile so that the images. I don't have a code for that just yet, but i'll add it to my to do list so stay tuned :)
@@InsideTheSquare Its definitely been a tricky adjust! Ill give that a go, thank you!!
Great tutorial Becca, thanks!
It's a total game changer for my portfolio website.
I've definitely been trying to resize the images up for mobile. Looking forward to seeing your solution!
@@InsideTheSquare I'm unable to adjust the height of that section on mobile (or desktop either). The vertical height slider is not displaying for that section for some reason.
This will fix the mobile resize. Adjust as needed
@media only screen and (max-width:640px)
{
.gallery-grid-wrapper {
display:flex !important;
animation: slideshow 30s linear infinite
}
.gallery-grid-wrapper .gallery-grid-item {
min-width: 22% !important;
margin-top: 2% !important;
}
Thanks Becca a lot for this tutorial ! I'd like to know if you encounter the problem of jittery when images are moving to the left, the horizontal scroll works great in my site but it seems that the images border are flickering, a bit laggy when moving, how would you fix this problem?
Interesting! That sounds like a load lag issue; potentially an issue with the size of the images but it's hard to say without seeing it in action. Feel free to send me a link and I'll take a look: support-at-insidethesquare.co
Hi! This tutorial was incredibly helpful, thank you so much. I would only like the scroll to happen on the homepage however, I see it affects the other pages with gallery images. How do I keep to just the home page? Thanks!
She talks about this at 6:35 in the video
Thanks @hilaryt - I'll have to start adding more chapters to my videos!
Is there any way to make the images scroll in an infinite loop and not reset at the first image? this would be awesome!🤞
This is definitely a digital duck tape workaround for that kind of feature, but doubling the images & increasing the negative margin can help make it look longer to the user!
Thank you very much! This is very helpful and clear👍👍👍
You are welcome - happy to help! ☺️
Thank you 🙏🏻 Works perfectly.
Awesome - great to hear! 🎉
Hello ! Is it possible to have two sections that go in opposite directions? One to the left and one to the right? Thank you very much!
That is such a cool idea - and yes! You'll want to create second animation so you can switch up the direction like this. In this code, section 1234 goes from right to left using the keyframe "slideshow1" while section 9876 goes from left to right, using the keyframe "slideshow2"
[data-section-id="1234"] .gallery-grid-wrapper {
display:flex !important;
animation: slideshow1 30s linear infinite
}
[data-section-id="9876"] .gallery-grid-wrapper {
display:flex !important;
animation: slideshow2 30s linear infinite
}
[data-section-id="1234"] .gallery-grid-wrapper .gallery-grid-item, [data-section-id="9876"] .gallery-grid-wrapper .gallery-grid-item {
min-width: 50%;
margin-right: 5%
}
@keyframes slideshow1 {
0% { left: 0; }
100% { left: -225%; }
}
@keyframes slideshow2 {
0% { left: 0; }
100% { left: 225%; }
}
Hello! This tutorial was very intuitive and helpful -- thank you!! But, my images (logos) are being cropped and I have no clue how to fix this. Do I need to add a custom code to make them fit? I've resized them in Illustrator per Squarespace image guidelines and they are still being cropped. Help please!! Thank you! Shauna
That's a great question! We can use code to force an image to fit inside the container, no matter what size it is. Update the data section ID in this code to make it work:
section[data-section-id="123456789"] img{object-fit:contain!important}
Amazing, thank you!!
You're very welcome! :)
This is super helpful. Thanks! Some of my images are cropped, even after playing with the aspect ratios in the settings and the min-width % in the script. Is there another way to adjust the size of images that run long horizontally so they fit in the container?
The aspect ratio of the container is a Squarespace default that we can't easily overwrite. I don't have a tutorial fix just yet, but stay tuned!
Thank you Becca! This is really helpful. By the way, I've been trying to figure out how I could make a background transparent/ or replace a background with an image. Could you please help? I'd really appreciate 🙏
This is such a great question! I think it's kinda wild that Squarespace wont let us use a background image for this type of section; why this one?! 🫠 I don't have a code for it just yet but I'll add it to my to do list - stay tuned.
@@InsideTheSquare You’re the best. Thank you! 🙏🏻🥰
Hi, is there a way to adjust the size only on the phone version? Because to get the perfect size on the phone, on the desktop it will be too big.
Thanks!
Great question! You can try creating two sections - one perfect for mobile and the other for desktop. Here is a tutorial that can help: ruclips.net/video/AQnwhitEqnI/видео.html
Hey Becca! Thank you so much for this help! If I wanted to put a second gallery underneath and have it scroll the opposite direction, would you have tips for that? I figured out how to reverse the direction, but can't get them to do opposite ways, if one goes right the other wants to as well, even with the section data. :) Happy Holidays!
That's a really cool idea! I havent tried it yet, but you could create a second slideshow animation and change the word left to right. The trick is to rename it so you reference the right one. Give this code a try - updating the data section id's - and let me know how it goes!
#page {
overflow-x:hidden
}
.gallery-grid-wrapper .gallery-grid-item {
min-width: 50%;
margin-right: 5%
}
@keyframes slideshow-left {
0% { left: 0; }
100% { left: -225%; }
}
@keyframes slideshow-right {
0% { left: 0; }
100% { left: -225%; }
}
#left-one .gallery-grid-wrapper {
display:flex !important;
animation: slideshow-left 30s linear infinite
}
#right-one .gallery-grid-wrapper {
display:flex !important;
animation: slideshow-right 30s linear infinite
}
you made it sooo easy.. thank you... question it is only letting rotate seven photos, is that the max? or is there a way to add more? thank you
Great question! You can totally add more - just adjust the other values to accommodate the additional space.
But how? There's no option in the gallery
hey, not sure if you're still checking this but i have a question. i noticed squarespace was purposefully lowering the quality of my pictures in the gallery as part of their optimisations, is there a way to bypass these optimisations? thanks!
That is super strange - it shouldn't effect image quality at all. I'd reach out to Squarespace support to see if there is an issue with your file upload.
Hey Becca! Is there a way to make it so the images don't get smaller on mobile version? Or when I make my browser window smaller?
Great question! This tutorial has some info that can help: ruclips.net/video/AQnwhitEqnI/видео.html
This will fix the mobile resize. Adjust as needed
@media only screen and (max-width:640px)
{
.gallery-grid-wrapper {
display:flex !important;
animation: slideshow 30s linear infinite
}
.gallery-grid-wrapper .gallery-grid-item {
min-width: 22% !important;
margin-top: 2% !important;
}
Thanks Becca, this is super helpful! I am still playing around with it, but is there a simple line of code that could be added to make the image have rounded corners like the rest of the images on our site? I played around with adding "border-radius: 10px!important;" but it doesn't seem to have any effect on the images. Thanks for your help!
That is a great question, and your code was so close!! The reason it didn't do anything was the selector. We need to add the border radius change to the image inside the container, so if you add three more letters to your code and you'll be all set 🙌
.gallery-grid-item img { border-radius: 10px!important}
@@InsideTheSquare Thank you!! That worked perfectly. I had tried to tuck it in together under .gallery-grid-item and that was not happening :) Coffee's on me!
@@tannisfrandsen3503 yay - glad that did the trick, and thank you for the coffee ☕❤
Hi becca, thanks for this. Is there a way to expand the number of images in the gallery loop? At the momentI can only get to 6 columns and that means quite a small scroll. Any thoughts?
Thanks again!
Rohan😀
Great question Rohan! I set this up on my cheat sheet landing page and ended up using 18 in total. Just make sure you adjust the time (s for seconds)and the width so it looks perfect for your image ratio :)
@@InsideTheSquare Hi! I want to do the same. Is the cheat sheet available for purchase on your site?
@@InsideTheSquare thanks!😃
@@InsideTheSquare Hi Becca, I just bought the cheat sheet but can't find where the details for setting up a version with more images. Where is the best place to find that information? Thanks!
When I add this code, for some reason it disables the new 'PIN' Blocks feature on Squarespace. I even have the sections set to their own IDs. Any solutions?
That is super strange - shouldn't be related to that at all, so i'm wondering if you have other code before/after that this is disrupting. Can you share a link or paste all of your code here? Happy to help!
Can this be done with a List Section? I want to add poetry to my images (while keeping them moving.
Great question! I don't have a code for that yet, but I can add it to my tutorial to do list; stay tuned 😉
Thank you so much for your help with this! Improved our website home page significantly. Is there any way to do different scaling of the gallery for mobile and for desktop? The images appear to small on mobile, but if I increase the width, the desktop get too big. Thanks!
Great question! You can set up media queries to change values for specific screen sizes. I've got some more info on how to do that here: insidethesquare.co/mobile
Hey Becca, thank you. But what code do I need to have different Mobile and Desktop sizes?
Hey there! You can check out this tutorial that will teach you how to create an alternate layout for mobile: ruclips.net/video/AQnwhitEqnI/видео.html
This worked great. Only I wanted it only one one page of my website. Now all my gallery blocks on the other pages are also scrolling which I did not want. How to I fix it so just be one one page?
I did paste in the correct section ID right before the .gallery-grid-wrapper which worked for the other pages I did not want the animation but now the homepage is also static which is where I do want the animation. I either have all or nothing. What am I doing wrong?
It's hard to say without seeing your code - maybe you need a space between the data section id and the selector? maybe you didn't close your code? I honestly cant tell from a comment. Feel free to email me a link (support-at-insidethesquare.co) and if your site isn't live, make sure your site is set to password protected before you do so I can actually see it (settings -> site availability -> password protected)
Is there a way so that instead of coming to an end or having the blank space at the end, it goes back to the first picture?
The "infinite" part of the animation is supposed to make that happen, but it's not seamless yet. I'll keep brainstorming other creative ways to make this work; stay tuned! :)
@@InsideTheSquare any updates on this? I'm using this code now and having this issue. I've played with the timing and the keyframes numbers, and also duplicated the photos and I'm still having a big gap at the end of the animation.
@@heatherlynngonzalez7824 have you tried adjusting the keyframe left value from -225 to something smaller so it doesn't go so far off the screen? Anything over -150 will be enough to get some scroll effect.
@keyframes slideshow {
0% { left: 0; }
100% { left: -150%; }
}
Thanks Becca! Very helpful. I have a lot of photos in my gallery and it seems to restart after 30 seconds and doesn't show all my photos. Is there anyway to have all photos in my gallery included?
You need to increasing the length of time and the percentage to fit the entire collection on the screen.👍👍
you're the BEST! thank you so much :)
Yay - so happy my tutorials are helping you rock your Squarespace site 🥳
Another great option, thank you!
You're welcome - glad you like it! 🥰
Love this! Thank you so much! Is there a way to get it so it's one size on desktop but bigger on mobile?
Great question! You can totally use a media query to increase the height on smaller screens. Here is an article with more info: insidethesquare.co/mobile
@@InsideTheSquare Where do we insert the media query code in this instance? I've tried it in a couple of different places with no success
Can you do the same but with video gallery ?
This is a great question! Video galleries are built on a different grid system, but with some clever code we could make it work. I'll add this to my tutorial to do list, but if you nee it ASAP, you can request a custom code here: www.insidethesquare.co/code-request
This was super helpful - thank you so much. It'd be great to get some guidance on the mobile layout if possible? I have a logo slideshow that either looks great on desktop, but minuscule and illegible on mobile, or great on mobile, but large and oversized on desktop. So grateful for your support 🙏🏻
This is a great question - I have a separate tutorial that can help: insidethesquare.co/squarespace-tutorials/gallery-section-mobile-size
@@InsideTheSquare Thank you so much ❤ I wonder is there any way to 'clip' the carousel at the frame of mobile resolution parameters, rather than it continue hidden out of frame? With this solution, if users attempt to scroll the images from right to left to see more of the images, the full-desktop-width of images becomes visible which 'breaks' the framing in a mobile browser. I'd love to hear your thoughts 🙏🏻
@@InsideTheSquare I'm getting a 404 page not found when I click on the link!
Hello, love this code but for some reason once I apply it, all the tabs that have pictures in it keep rotating. Just wanted to have it on the main page. I also tried applying the section code before the gallery and it either stops them all from moving or makes all the pictures disappear. Please help. Appreciate it.
You'll want to isolate a single gallery section using it's data section id! Check out this article for more info: insidethesquare.co/resources/squarespace-id-finder-2024
Thanks so muuch for this tutorial! Super helpful! ...But am I the only one who's overflow is still visible? I've looked over the code carefully, but
#page {
overflow-x:hidden
}
isn't hiding the overflow. Has anyone else run into this issue?
Problem solved! If anyone else experinced something similar it was becasue I tried using this code after a section ID which interfered. Removing the section ID hid the overflow 👍🏻
Yay! Way to troubleshoot 🙌 glad you got it to look and work the way you want it too ☺️
@@Cassklass what is the code for that? im struggling to hide the overflow too
Ugg this was so good. Thank you.
You're so welcome! 😊
Please enjoy those cups of coffee I just sent. Thanks again.@@InsideTheSquare
Its helpful. But I adjusted everything as per desktop screen - however, on mobile the auto-flow images are very small in size. Is their any responsive adjustment for it? Please advise
Great question -there is a responsive way to code anything in Squarespace, including this! Here is a tutorial with more info: :insidethesquare.co/squarespace-tutorials/gallery-section-mobile-size
This will fix the mobile resize. Adjust as needed
@media only screen and (max-width:640px)
{
.gallery-grid-wrapper {
display:flex !important;
animation: slideshow 30s linear infinite
}
.gallery-grid-wrapper .gallery-grid-item {
min-width: 22% !important;
margin-top: 2% !important;
}
@@planetofthegames3174 Thanks I will try and let you guys know!
I'm using the code as described in the video, and i'm using PNGs with a transparent background but the images don't resize to fit so they are all showing as cropped... is there anything that can be added to prompt them to show the whole image rather than crop large sections? Thanks :)
Unfortunately the frame that Squarespace places the image has to be the same ratio for all images in the gallery. One thing that I've done in the past is create a canvas of the ratio I need, then center my PNG's on that canvas vertically and horizontally so they are aligned. Probably not the answer you wanted, but I hope it helps! Best of luck with your project :)
My images are cropped and the aspect ratios provided from the gallery aren't fitting :\ The "min-width" changes the size, but the images are still cropped. Any code for this?
Great question! Feel free to submit a code help request here: insidethesquare.co/code-help
Can this work for video blocks as well? Thank you!
Not this code, but I like the idea! I'll be sure to add it to my tutorial to do list; stay tuned. 😊
So, this is not what I recall as horizontal scrolling. On this, there are definite boarders between the photos. How do you set it up so there are no borders between the photos that are scrolling?
You can reduce the padding in the gallery design settings.
Hi! I love this and it works flawlessly!
My images are pixelated and look slightly blurry when using the scrolling gallery - any tips on that? Thank you!
Intersting! I know Sqsp has been making some adjustments to image storage lately; I'd clear your cache and try it again in a few days to see if it "fixes" itself. 😉
I'm getting the same issue as well. My images are so blurry that I can't really use them. I cleared the cache and it's still the same. The latest images I uploaded are 3163x2372, which I think is an overkill for websites. Any thoughts? Thank you!
Perfect, thank you!
You're so welcome! :)
Hi Becca - this is great thank you. Quick question, I only want to apply this to the gallery on my home page but even when I put in the section ID - section[data-section-id="664dfaf7c3a89904185c92b0"] - before the code, it continues to apply it to all galleries on my website. What an I doing wrong? Thank you.
I've just re-watched the tutorial and I was putting the ID at the top of the code section rather than before each gallery-grid-wrapper - doh! Thanks again, love these tutorials!
Glad you were able to figure it out - that kind of "ah-ha" moment is what got me hoooked on creating custom code 🙌 Congrats on this one and best of luck with your project :)
Hey quick question, if i wanted to give the impression of an infinitate loop (e.g. not restarting) would i just duplicate all the images / list again to extend this out please?
Great question! You can increase or reduce the size of the offset, add a second set of images, and change the duration. All of that requires a little extra fine-tuning based on the size of your images and sections, but it should help!
@@InsideTheSquare Brilliant thank you for the help, i added a second set of images and it worked brilliantly
Hello Becca, Thank you so much for such a great tutorial. I was looking for this for a long time and your video made it so great and easy for me. I have problem however. On mobile the height of my gallery is so small. I would love for it to take 50 or 60 vh. I tried your tutorial from changing gallery height to no avail. Would you be able to help me with this please? Thank you very much!
Having the same issue on mobile. I can adjust the height to look good, but then its way too big on desktop
You can create a media query to change sizes on mobile! Check out this article for more info: insidethesquare.co/mobile
Could this be done with a portfolio carousel?
Squarespace changes the "name" of page sections all the time, which makes a simple question like this a little more confusing than it should be 😬 Portfolios are a type of collection page, and they don't have a carousel display option for the projects in the collection. Page sections have a new category that says "portfolio" but its really just the same page sections we have always had: fluid, list, gallery, and classic. Most of the sections in the "portfolio" category are fluid *except* for the ones that have this icon: ⓘ That's an indicator of an auto layout section; list or gallery. List and gallery used to have their own section, but Squarespace removed those categories about a month after they made them. List's have a carousel option - galleries do not. Soooooo -TLDR: if you see a carousel display option - that's a list section, and that's what were using in this tutorial. You'll find those auto layouts inside the people sections, portfolio sections, services, and testimonials. Just look for the ⓘ icon. 🫠
@@InsideTheSquare Thanks for the reply. I went ahead with the simply gallery and it looks great on web but in mobile the images are really small. Is there a way to set different sizing and speed on mobile or is it just "try to find a happy medium"? Again, thnk you so much for your help!
@InsideTheSquare I am also wondering if there is a solution for the sizing issue. Thanks for your help!
Seems to be limited. Is there any way to make this code work for Gallery Type > Slideshow: Reel? This code seems to only work for select Gallery options...
Yup - it's for the only option that has the automatic scroll animation...
can I have these pictures sliding in a loop or they always has to reset and start from the beginning?
You can add them more than once, but there is no way to create a loop with a line of images using CSS.
@@InsideTheSquare thanks that's what I actually did. appreciate feedback
Hi is there a way i can add title / paragraph above the scrolling animation please i currently have a title but it is a massive gap between the animation and the title so would like it to be 10 pixels apart
You can add a simple page section above it! As long as you don't have a border it will look seamless :)
@@InsideTheSquare Thank you so much.. i had done exactly what you suggested works like a treat.
Thank you for sharing😇
You are so welcome 😊
Is there a "how to" on adding text over an image on a slideshow?
There are a few different ways, but one of the easiest would be to use a banner list section. These show a title and/or description above the image and you can scroll through it. You'll find list sections under the "people" page sections right now... Sqsp moves them around sometimes so I hope they are still there when you look for them 🤞😅
mine doesnt loop infinitly. did i miss something? theres a large white space once the last image has passed. and takes like 10s before it restarts
Please watch the video starting at the 4:54 minute mark.
Thanks so much for this! I've added the code. It's working great. However, the infite stroll has a hug gap after the last logo and continues to scroll for a bit until it shows the first logo again. Could you please help?
Just make sure you adjust the time (s for seconds)and the width so it looks perfect for your image ratio :)
THANK YOU!!
You're welcome ☺️
Is there a way to add a title to the scrolling gallery? Like 'brands we've worked with'?
Great question Audrey! You can add a section before it with text, and align that section content to the bottom so it looks like the same section.
Is there a way to add title text that doesn't move to the side of your horizontal scrolling image gallery?
Great question! I don't have a tutorial for this just yet, but I'll add it to my to do list so stay tuned :)
I have a bit of a problem... the effect is applied on all the pages. How do I prevent this from happening?
Great question! You can isolate an individual part of your site by using its block id, or in your case, data section id. Here is an article & tutorial video with more info: insidethesquare.co/resources/squarespace-css-targeting-tips
Hi! Is there a way to add more than 6 images to this?
Yup - you just need to adjust the other property length values to fit; it will take some finessing.
Thanks for the tutorial! Do you know if there's a way to adjust the size of the images in mobile? They are currently very small!
You'll need to add a little more code-- this tutorial should be able to help you out. It will teach you how to create an alternate layout for mobile: ruclips.net/video/AQnwhitEqnI/видео.html
I have the same question! Is there a way to change the size of the images on mobile only? Thank you so much!
Is there a way we can do the same but for a background image? I'm trying to create a rotating background for a splash page.
Interesting idea! I don't have a code for that but I'll be sure to add it to my tutorial to do list. Stay tuned 🙌
HELP! I am not seeing the custom CSS option :( I have created an image gallery but there is no option to custom CSS...what am I doing wrong?
You’re not doing anything wrong! Squarespace changes their menu all the time; too fast for me to keep updating my tutorial videos! 😂 try looking under website > pages > website tools > custom css
@InsideTheSquare I have an image gallery but there is no option to make it scroll or enter a code.
Is it possible to create this but without it automatically scrolling? So if people using your site on their phone could swipe through the blocks, but the blocks not automatically moving? I'm trying to create this for a sort of navigation panel at the bottom of my site where each individual photo links to a project page on the website, so people can swipe through and choose which project page they want to visit.
Absolutely - you dont need to have the scroll feature at all! Just skip the code and use an auto layout like a list section or gallery section. Here is a podcast episode with more info about those section types so you can be sure you're picking the right one for your project: insidethesquare.co/podcast/03
Amazing - thank you
You’re so welcome - happy to help!☺️
Is there a way to have a set of three image blocks on Squarespace where the images fade in and out to other images?
I’d recommend creating a gif instead of using code for that! You can upload a gif to any image block 🙌
Thank you so much!
You're welcome! ☺️
How to do this with Portrait orientation images?
You can add this code to prevent cropping and keep the original image ratio:
.gallery-grid-item-wrapper img {
object-fit: contain !important;
}
How do we create a slideshow reel without the images sliding? We need them just to appear over each other.
If that’s all you need, I’d recommend creating a gif! You can use a program like canva to have any timed animation you want on a loop and you don’t have to create code for any interaction 👍👍
Hey Becca! This is SO helpful! I'm having a hard time finding a tool that will allow me to save my photos with the needed aspect ratio and transparent background. Everything I have tried just wants to crop the photo to that aspect ratio which isn't what I'm wanting. I've tried Photos on my Mac as well as Preview and Canva. Any ideas?
This is a great question! I have a workaround I’ve used via Canva. Set up a specific size canvas and then add your images in the ratio you want, then export as a PNG with a transparent background. The canvas/files will all be the same dimensions but the images will keep their own ratio. Hope that idea helps and best of luck with your site!
Can someone help me: how i can add more images to one line? After 8 images, the 9th and 10th image gets skipped and won't show on the scroll.
You need to increase the left keyframe animation percentage to fit them all in. Change 225 in this to be a larger number: { left: -225%; }
Please help! How can I make a section move in the opposite direction? I'm trying to add one underneath and copying both section ID codes, but they both are showing up as static.
Change the "left" in the code to "right" and that should help!
A product page does not allow us to add a new section. So now we are left with an issue with a carousel that moves 50% of the image when the user clicks next.
This technique is specifically for an auto layout section. Additional product info uses classic editor content blocks. I don’t have a tutorial for this specific animation for any classic section content block but I can add it to my to do list!
@@InsideTheSquare thanks Becca!
Total coding rookie...When I open cutom css there is already code listed. Do I add to bottom, top or am I in the wrong spot?
Great question - you're in the right place! Just hit enter/return to start a new line and add additional code. Pro tip: make sure you closed your last code bracket before you start a new one, so your last line should end in }
Hey Becca! I hope you can help me with this, I did two sections one after the other so I can use one for desktop and one for mobile, it seems that the keyframes in the second section also affect the first section (it keeps going until it disappears and then after a couple of seconds starts back again and If I delete the second section then it's fine) I've checked that I added the correct section data before both .gallery-grid-wrapper's.
That's so strange - especially since you are using the dat section id! Can you send me a link? I'm happy to take a look at your source code to try to track down the problem: insidethesquare.co/contact
I'm having the same issue. Were you able to find a solution? - Kelly
how do you stop it from looking like the looping is obvious? I want the first image of the slideshow to automatically roll after the last image. Is this possible?
Hey Maiya! Play around with adjusting the time and consider duplicating or even tripling the images you use to make it last much longer before the reset.
@@InsideTheSquare Thanks so much :)
Thanks, Becca! You create such great content and I so appreciate it. (I was so excited when I saw this video pop up in my notifications - I've been trying to figure out how to do this without a plugin).
I'm wondering if there is a way to customize the height of the gallery - would that be margin-top and margin-bottom or height in vh? e.g height: 45vh !important;
Changing the width of the images will actually alter the height! Check out the 4:25 minute mark of the video to see how that works.
For some reason not all of my images are showing, it gets 3/4 of the way through and immediately cycles back to the beginning without showing the remaining 10 out of 35 logos. I've tried increasing the time to 60s and 90s and that didn't help.
The time is just the speed - what you need to do is make space for all of your images!! Left:-225% fits the 6 on my site; try increasing that value until all of yours fit. Also, consider creating a gif instead - you’re processing an animation for 30 images, and one gif would load so much faster. Hope that I info helps and best of luck!
why do my professional photos look blurry on my laptop?
I have no idea - could be the load time, your connection, or the auto compression. If it happens on other devices & internet connections, you should reach out to Squarespace for support.
im having trouble keeping one gallery sliding and one gallery still. anyone else have problems with this? I followed the tutorial exactly but whenever i paste the section ID all my galleries just stop scrolling :(
You need to place the id before both selector classes in the code, like this:
#page {
overflow-x:hidden
}
#block-1234 .gallery-grid-wrapper {
display:flex !important;
animation: slideshow 30s linear infinite
}
#block-1234 .gallery-grid-wrapper .gallery-grid-item {
min-width: 50%;
margin-right: 5%
}
@keyframes slideshow {
0% { left: 0; }
100% { left: -225%; }
}
You can also add !important to your values. For other troubleshooting tips, I've got a free guide at insidethesquare.co/sos
Genius!!
Thank you ☺️
@@InsideTheSquare Hey would it possible to customise different 3 galleries?
Never mind, I saw another video where you used ID finder extension and sort that out, is important modified the "slideshow" and that works. thank you and great content
any way to make this loop infinitely and seamlessly?
It will loop infinitely (animation: slideshow 30s linear *infinate*) so all you need to do is adjust the values to suit your image display size like I show in the video. 👍👍
@@InsideTheSquare I mean it doesn't loop all the way around with these settings. I'll never see the final image and the first image on the screen at the same time in a complete cycle. it just gets to the end, then immediately starts over, it's not seamless
@@DwayneLoganJr. Sounds like 30 seconds isn't enough time for all your images - try changing 30s to 60s or longer.
I can't navigate to the pages. It doesn't look like this anymore.
They changed the word Pages to Websites. Click on the first option and you’ll be all set to keep going with this tutorial 🙌
Is there a shortcut to apply this to only one page/section? It's currently applying to all my pages and gallery sections.
Edit: Solved by adding the section ID to each of the Gallery Grid lines of code:
#page {
overflow-x:hidden
}
.page-section[data-section-id="64c5af6223030a605d50cfd9"] .gallery-grid-wrapper {
display:flex !important;
animation: slideshow 30s linear infinite
}
.page-section[data-section-id="64c5af6223030a605d50cfd9"] .gallery-grid-wrapper .gallery-grid-item {
min-width: 50%;
margin-right: 5%
}
@keyframes slideshow {
0% { left: 0; }
100% { left: -225%; }
}
Perfect - section ID is exactly what you should do! Way to go 🙌
@@InsideTheSquare Thank you. Is there a way to change the width for mobile and desktop separately ? The "min-width: 50%;" makes my gallery large on desktop and tiny on mobile.
does this create an infinite scroll?
Hey Sarah! I used a standard the CSS animation property that includes infinite scroll. Give it a try and if it doesn't work out, let me know! Best of luck!