Search the Community

Site URL: https://www.anexceptionallife.com/ Hi All, I've implemented a summary block (using lazy summaries plug-in) to get a carousel of quotes rotating towards the bottom of my homepage. Currently everything is functioning exactly as I intended with one exception. I would like to have the carousel auto-rotation pause when someone hovers over the quote. https://www.anexceptionallife.com/ Does anyone know if there's a specific javascript snippet I can use to target that block and pause on mouse-hover? Thank you!

Site URL: https://ukulele-pug-le4k.squarespace.com/verein hello, on my page I want to introduce the members of our club. To do so I added a carousel-item-list. I want to add a hover-effect where single images switch by hovering over it. I have problems to implement that. How can I add a hover effect where single images change on hover? Thanks a lot! https://ukulele-pug-le4k.squarespace.com/verein PW: unserverein123 section[data-section-id="616802f396f85b30804b1e0c"]

Hi, is there any way I can replace the left / right arrows of my carousel to a set of buttons (similar to the photo attached), on both browser and mobile? (Squarespace 7.1.)

Site URL: https://www.bandgdesign.com So I jut inherited a site and I'm looking at what happens to the URL when you arrive and begin to scroll downwards. When you arrive at the site, and begin to scroll down, the URL has a #mobile-carousel added to it on mobile, and a #carousel-homepage added to it on desktop. Being th eperson who did NOT build this site, I'm wondering why this is needed. Is this ultimately necessary to have? I'd love to have these not occur for SEO and Google Ads tracking code reasons, and the previous web developer tells me "it's normal for Squarespace." I would be happy to provide any additional back-end details that can help. Thank you in advance!

I am wondering if anyone has a way that the excerpts in my blog summary (the " What our clients say…" section) can show stacked on top of each other in mobile view? Two columns on mobile view looks too squished! Would welcome any suggestions!

Site URL: https://www.maddenillustration.co.uk/monster-mashup Hello, I have 3 carousel gallery blocks stacked on top of each other and would like the navigation arrows to appear on either side of the carousel so not to overlap the images, and therefore be more noticeable. I would also like to change the appearance of the arrows to a custom icon/image, if possible? Thanks very much https://www.maddenillustration.co.uk/monster-mashup

Hello! I'm using the Gallery Masonry and wonder if it is possible to disable the carousel in it. I have searched the forum but found nothing.

Site URL: https://www.getwatercooler.com/ Hi - I'm interested in adding a vertical auto-carousel "animation" to the text in the hero image on this site: https://www.getwatercooler.com/ Practically speaking, I would like the word "insights" in the phrase "insights at work" to be replaced by additional words that scroll up from the bottom automatically and pause for 1-2 seconds before the next word in the carousel appears. In this case, the "at work" text would remain frozen in place and not animate, just the first word being replaced automatically. Additional words might be something like "equity" to make the phrase "equity at work" or "empathy" to make the phrase "empathy at work". I've seen a lot of advice for animating the entirety of a text box, but not portions of that text box as in this example. Thanks for sharing your expertise!

In this page of my site: https://www.unswaseanconference.com/about-asean-2021 I want to make the caption of each image in my list carousel to only appear on the centre of the image and also only appear when the image is hovered. Any help on this will be greatly appreciated. My idea is for it to be like the one discussed on this post: However, that post only works for summary. When I tried applying it to my code, it didn't work

Site URL: https://tulip-ranunculus-xc8d.squarespace.com/destinations I would like the images in carousel to appear bigger on mobile. Right now they are just too small. Is there a way to edit this so the images appear bigger on mobile? Please assist. https://tulip-ranunculus-xc8d.squarespace.com/destinations Password: "SuperTrip"

Site URL: https://sanctuarymediagroup.squarespace.com/#testimonials Hi there, I have created a testimonial slider in 7.0 (Brine) with the testimonials set up in a hidden Blogs page and the code below. Is there a way to change the navigation from the existing arrows at the top to a 'dots navigation' below the testimonials, which would make it easier for users to understand there is more than one testimonial. This is the web address https://sanctuarymediagroup.squarespace.com/#testimonials Password SMG Many thanks! ********CSS******** #block-yui_3_17_2_1_1630433547364_2252 .summary-thumbnail { overflow: visible !important; border: none; } #block-yui_3_17_2_1_1630433547364_2252 .summary-item-list { pointer-events: none; } #block-yui_3_17_2_1_1630433547364_2252 .summary-item-list img { height: 150px !important; width: 150px !important; } #block-yui_3_17_2_1_1630433547364_2252 .summary-thumbnail-outer-container { height: 150px !important; width: 150px !important; margin: 0 auto; } #block-yui_3_17_2_1_1630433547364_2252 .summary-excerpt { margin-top: 30px !important; } #block-yui_3_17_2_1_1630433547364_2252 .summary-excerpt p { font-size: 24px !important; line-height: 1.6em !important; text-align: left !important; } #block-yui_3_17_2_1_1630433547364_2252 .sqs-gallery-design-carousel .sqs-gallery-controls .next:before { color: #FC0061 !important; font-size: 40px; width: 40px; height: 40px; line-height: 40px; } #block-yui_3_17_2_1_1630433547364_2252 .sqs-gallery-design-carousel .sqs-gallery-controls .previous:before { color: #292933 !important; font-size: 40px; width: 40px; height: 40px; line-height: 40px; } #block-yui_3_17_2_1_1630433547364_2252 .sqs-gallery-design-carousel .sqs-gallery-controls { width: 100%; padding-right: 20px; } Also just to flag that I am currently using also this header code injection for automatic rotation of the testimonials ********HEADER CODE INJECTION******** <script> Y.on('domready', function () { var galleries = Y.Squarespace.GalleryManager.getGalleries(); var duration = 15000; var gallery=galleries[0]; var carousel=gallery["gallery-design"]; var totalGroups=carousel.get('totalGroups'); var currentGroup=0 var container=gallery.get("container"); var nextBtn=Y.one(gallery.get("elements.next")._nodes[0]).on("click",function(e){ e.preventDefault(); e.stopPropagation(); advanceCarousel() }) var prevBtn=Y.one(gallery.get("elements.previous")._nodes[0]).on("click",function(e){ e.preventDefault(); e.stopPropagation(); backupCarousel() }) Y.one(container._node).get('parentNode').on("mouseover",function(){ clearInterval(myInterval) }) Y.one(container._node).get('parentNode').on("mouseout",function(){ clearInterval(myInterval) setMyInterval() }) var myInterval; function setMyInterval(){ myInterval = setInterval(function(){ advanceCarousel() },duration) } setMyInterval(); function advanceCarousel(){ if(currentGroup==(totalGroups-1)){ currentGroup=0; }else{ currentGroup++; } carousel.goToGroup(currentGroup); } function backupCarousel(){ if(currentGroup==0){ currentGroup=totalGroups-1 }else{ currentGroup--; } carousel.goToGroup(currentGroup); } }); </script>

Site URL: https://tulip-ranunculus-xc8d.squarespace.com/destinations For some reason the image gallery I have set as a carousel on the page https://tulip-ranunculus-xc8d.squarespace.com/destinations will not center. I've tried a few CSS edits but none are working. Someone please help! https://tulip-ranunculus-xc8d.squarespace.com/destinations Password: "SuperTrip"

Hi, does anyone know how to change the arrows on a product carousel to the indicator dots at the bottom. I'm currently using the code below to scroll through the product images on a mobile. Any help would be appreciated. /* Product slide arrows control */ @media screen and (max-width:767px) { .ProductItem-gallery-carousel-controls { display: flex !important; } /* arrows background */ .ProductItem-gallery-carousel-controls * { background: white; } .ProductItem-gallery-carousel-controls>div { justify-content: center !important; } .ProductItem .product-item-gallery-carousel-control::after, .ProductItem .product-item-gallery-carousel-control::after { border-color: black !important; } }

Site URL: https://www.vaseconstruction.com Hi! I just want to ask if anyone has a CSS code to turn the carousel summary block into stacked mode when viewed on mobile? Summary block looks fine on desktop view: But when switched to mobile it starts with a blank white area, and then slides into 4 thumbnails. Ideally, we wanted this stacked so it looks nice on a small screen. Thanks to anyone who can help.

Site URL: https://www.strataoncology.com hello - trying to determine if there is code for autoscroll on the headline banner slideshow. thrilled that this tool is built in now, but really need autoscroll functionality. I have toggled "auto scroll" with no success.

Hello, I'm looking to center my carousel arrows vertically to the center of the image on Mobile. It's vertically centered on Desktop but I went I view it on Mobile the arrows are under the image and horizontally centered. Would any of y'all know how I can fix this? Thanks

Hello Squarespace Community, I've been trying to figure out how to recreate a visually similar or identical image carousel using only CSS and HTML. The current code uses Javascript to create class selectors when certain options are set to true or false. My codepen comes from a fork of the original below. As you can see I won't be needing bullet-containers or bullet classes in general since I removed the bullets from my fork. I just want a simple carousel that slides from clicking the arrows and has the transform property for 'previous' and 'next' images so they appear in grayscale behind the primary focused image. Automatic scrolling would be a huge bonus and would complete my project 100%. Please let me know if anyone has suggestions or if someone very generous could help me rewrite this properly. Thank you all for your help and I'll be checking back here for updates frequently. My Pen Copy: https://codepen.io/Verium/pen/KKqqmBB The Original Pen: https://codepen.io/flowrome/pen/abowVRE

I am trying to show the text for the images on my carousel list. Its some pictures of me from photoshoots however, I would like to give credit to the photographers when you hover over each picture. Any way to do this?

Hi there, I’m using a summary carousel block to display testimonials (actually blog posts). I click the right arrow to scroll through the testimonials. When I reach the last one, it stops and does this fast rewind left back to the first one. Is it possible to add code so you can keep clicking the right arrow and it will keep cycling through in a continuous loop? I don’t want it to scroll automatically, I just want the right arrow (or left arrow) to keep cycling through instead of stopping at the end and then fast-rewinding back to the first one. Any help is much appreciated. Thanks!

Hi all, I'd like to know if it's possible to have a gallery carousel run in an infinite loop so that after the last image, it continues scrolling in the right direction starting at the first image again. Ideally this would apply to all gallery carousels but if too difficult, just on blog posts would be great also. Can this be solved with coding? https://projectsinsider.com/project/3-rubida-court-endeavour-hills lifeisgood Cheers.

Site URL: https://www.thecheekypineapple.com Hello, This is my first time posting on here, so apologies if I'm missing something important. I've seen some other posts about making equal height carousel cards, but I'm no web designer and can't figure out how to make it work for me. Is anyone able to help me out with some code to get the cards on my homepage carousel equal height? I would appreciate it so much! Thanks in advance

Site URL: https://thedetoureffect.com/ I saw someone post here about how to make thumbnails appear on a product carousel gallery. How would I do the same thing on an image carousel gallery? I only want this on some pages, not all, so I will probably inject it in a code block on a particular blog post and NOT in Design > Custom CSS

I am trying to create a video carousel on my squarespace but apparently that is not possible in the new 7.1 version. Does anyone have any work arounds or coding they were able to add?

Hi all, How do I make a gallery carousel in a blog post fully bleed from left to right? This is what it currently looks like. The change will be applied to hundreds of blog posts so ideally the solution should not be block/collection specific. I want it looking like this below which seems to only work on a page. These are the options that comes under Slideshow Full with Full Bleed.

Site URL: https://www.gracemooreyoga.com/ I am trying to hide the arrows either side of the carousel (as shown on the attached image) but only on desktop and tablet devices, I want them to remain on mobile devices. Is there a CSS snippet that I can use to do this? Link to the page: https://www.gracemooreyoga.com/ Many thanks in advance! Grace