I wade through pages and pages of explainers - confusion. I click on a Rebecca Grace video, and have the answer I'm looking for within 20 seconds 👏ev-👏ery 👏time. Thank you!
You are fab! So so so helpful and I love the way you clearly and concisely explain everything, many thanks from a new designer taking on clients and figuring these things out as I go!!
Thanks for the tutorial. But is there a way to set a STATIC headline over the top of a rotating carousel? In this tutorial the text slides with the pictures.
Thank you for this Rebecca! Do you know if it is possible to create two slide shows next to each other? I'm trying to create two squares that consist of images that fade from one to another, that are clickable. Ideally, when viewed on mobile, the two squares would shift to above and below each other. Thanks!
Hi Rebbeca, the tutorial was incredibly helpful! I was wondering if there was anyway to make the the autoplay stop if the mouse was hovered over the gallery. Thanks, Demetris
Hello! Yes, you would have to add a listen event for Mouse Over. I would be happy to help you with this during a 1:1 Help Session. You can find out more and book a call at www.rebeccagracedesigns.com/squarespace-help
Hi Rebecca, Loved this tutorial! I was wondering do you also have a tuttorial now that I have this slideshow that I can edit a text on top of the photo's? I made this slideshow as a site header but I want to edit a text and a button. Is this even possible? thank you already for you response. greetings sheila
This is great thank you. Is it possible to move the arrows so they are on either side? Also how to go about editing the font style (italic etc) and size? Would be good to have the testimonial as a size/style and the author different? Many thanks
To target a specific Summary Block, add the Block ID to the code. For example, try changing this line... var nextArrowSummary = document.querySelector(".summary-carousel-pager-next"); to... var nextArrowSummary = document.querySelector("#BLOCKID .summary-carousel-pager-next"); and then edit for the block id of the summary block you want to target.
Thanks a lot, Rebecca. Very helpful! I use the code for gallery carousels and have it injected in my general footer section. However, every time I try to edit anything on my website, that part also seems to be affected by the code, as after 3 seconds the part I'm editing kicks me out, so to speak. Does this make sense? Any way to fix this? 🙏
Make sure the code is in the Code Injection not in a block in the Footer. Also, try using the following code. I added in a section that will have the code only run on the live version of your site. (function() { var nextArrowGallery = document.querySelector('.gallery-reel-control-btn[data-test="gallery-reel-control-btn-next"]'); function clickNextGallery() { nextArrowGallery.click(); } if (window.location.href.indexOf("squarespace") < 0) { setInterval(clickNextGallery, 3000); } })();
Hi Rebecca! I used the gallery carousel code. It works, but now it's not letting me edit sections on that page. I click edit section and it goes away after a second. Looks like it's disappearing every time the slide moves. Is there a fix for this?
I tried a few different CSS options to get the Slideshow:Reel to autostart and yours seemed to be the only one that worked. The only issue I have is that when the CSS is present in the footer, the images keep advancing even when in Edit mode. Each time a slide advances it also closes any option window that is open. For instance, if I am in a section and click ADD BLOCK the box of block option opens for me to select from but as soon as a slide advances the box closes. The only workaround I've come up with is to delete the CSS while editing and then remember to put it back or to edit the time interval in the CSS and then remember to change that when I'm done editing.
Hi Rebbecca, everything seems great, but I´m stuck in terms on how to make the carrousel display video instead of photos. Do you have info on this? Thanks a lot!!!
Hi Rebecca, thanks for the video it was super helpful. Is there a way to edit the speed of the transition? Or even just make it so it slowly just plays through them. Like a slow train running across? aha.
You can speed up the transition by changing the number 3000 to a smaller number. The 3000 represents 3000 ms or 3 seconds. To have it slide across you would need to change the transition completely which would require more complex code.
@@RebeccaGraceDesigns Yeah but i mean 3000 is the time of the pause. if i could control the timing of the move too it would be great! eg 3000(pause), 1000 (transition), 3000 (pause) any idea on a away this can be achieved?
Hi Rebecca! Thanks for this awesome video! Is there a way to change the colour of the text to be different for each image? I find I'm losing my dark header text with darker images. (I hope this made sense) Thanks!
You can use CSS to change the color of the text. If you are using the text overtop the image, I suggest adding an overlay to help the text stand out better.
Hey Rebecca, thank you for this! Is it possible to change the style of the navigation arrows? I don't want them at the top, but rather more like a button in the middle right hand side to toggle between? More of the type of settings a general gallery block has? Or is there a plugin/option that you know of that allows for this? I'm trying to showcase my services in a more "uplevel" style!
You would need custom css to do this. I would be happy to help during a 1:1 Help Session. You can find out more and book a call time at www.rebeccagracedesigns.com/squarespace-help
Rebecca, thanks for your guides! You know if is possible to put a carroussel as a first page image, like background, with transparent menu? Because i just try to put a carroussel full image and my menu change the background even with the 'adapt' on :/
When you have a carousel as the first section, the header does not overlap it so even if you coded it to be transparent, it would only show through to your body color. You would have to add code to move the first section up under the header.
Hi Rebecca! Thanks for this info. Do you know if we can somehow select a few “pages” for the content in the carousel. I.E. If I want my carousel to have a little bit of each of the blogs I have posted (one from X folder, another from Y), is that possible?
Hello! At the moment you can only select one page at a time. However, you could use a Gallery Reel instead and manually add the thumbnails you want to showcase from each of the pages.
This is great but what about for those of us not using 7.1? There is no option for 'advanced' in the settings and I'm finding this confusing how there's both a summary block and gallery block when the code keeps referencing summary. Just trying to get scrolling testimonials that's all 😓
Hi Rebecca, thanks so much for this info. I was trying to insert a carousel gallery block and getting frustrated with the whole notion of having to point those images to hidden blog post pages. And without your code I probably would have been stuck for many more hours trying to figure that out as well! I'm new to Squarespace and little things like this are, quite frankly, baffling to me. Why can't the carousel gallery block simply allow you to upload images and create...well, a carousel gallery? Why does it instead have to point to other sections of the website and require code to not direct you there if clicked? It really doesn't make any sense to me. Anyways, thanks again for the tutorial - you saved me a ton of time and frustration!
Hello! If you want a carousel of images that do not click anywhere than choose the Slideshow Reel Gallery Section instead. The Summary Block Carousel is meant to send people to your collection pages (although some people use them for various creative other reasons as well).
@@RebeccaGraceDesigns Unfortunately the Gallery Section is too clunky for the exact visual style I need (I'm creating a design portfolio and thus visual hierarchy is very important for employers to see). Your Summary Block "Testimonial Carousel" is the closest solution I can find that matches what I'm going for. After posting on the forums, it seems Squarespace 7.1 does not support gallery blocks (which do have regular carousels in them) on certain types of pages like portfolio sub-pages, which is what I'm trying to put it on. When I tried emailing customer support about it, they told me only Circle Members can add gallery blocks anywhere they like, which seems like such a slap in the face - essentially the solution exists, but only for superusers that oversee 3 paid sites?? I find that ridiculous and will not be returning to Squarespace once my subscription is over. Sorry to rant but I do appreciate your solution, yours was able to successfully circumvent this restriction and help a TON. Thank you!!
To change the background color of the arrow you can use... .gallery-reel-control-btn::before { background-color: red; // color behind the arrow } To change the color of the arrow you use... .gallery-reel-control-btn { color: red; // color of the arrow }
When you go to edit, click on the Image Icon to edit the photos. Check out this article for more information. support.squarespace.com/hc/en-us/articles/360035636332-Gallery-sections#toc-add-images-to-the-gallery
Unfortunately, you cannot add videos to Summary Blocks or Gallery Reels. I would suggest using a GIF or video thumbnail and then linking to the page with the video.
