Search the Community

How can I move the Carousel Section Arrows on mobile to the center similar to how it is on desktop? Right now on mobile, the arrows sit under the images.

Site URL: http://www.lesfillesdelaconstruction.com Hi, I am trying to make the images in the summary-block (carousel style) bigger on mobile. I have tried this code, but only the first image becomes larger. @media screen and (max-width:767px) { .sqs-active-slide img { width: 100% !important; height: auto !important; left: 0 !important; }} Any ideas? Thank you !

Hi there, I'm curious as to how I would go about creating clickthrough URL's on the individual cards I created in Figma. I'm utilizing an image content section that is designed as a carousel and I uploaded hard designed/flattened "cards" as images in the carousel. I want to make each card it's own clickthrough link to that companies website. I have the option of creating buttons as clickthrough's that live beneath the cards, but I want the clickthrough to live directly on the individual card/image components themselves. Anyone have an idea on how to do this? (I'm proficient in coding so feel free to drop some ideas when it comes to DOM manipulation).

Hello brilliant web-builders! Is there any way to make the below customization possible? A) Summary Block: Images to be displayed in circular shape, instead of the retangular or sqaure from the options under "Design" of the block Move the order of the display layout from "Image > (Blog) Title > Excerpt Text" to "Excerpt Text > (Blog) Title > Image"? B) Testimonial Carousel: Move the order of the display layout of all blocks in the carousel from "Image > Text > Title" to "Text > Title > Image"? Set / change the timer of the auto slider to move every 5 seconds Thanks a million! Freeman xx Site URL: https://www.traveltotransform.com/the-book

As per the title, I'm curious as to why simple image carousels are so difficult to make in 7.1. There are many times where I want to add one alongside some text blocks to make my page more dynamic, but there is no way to just simply upload a series of images and create one. Instead, it seems one has to create a Summary block which only allows carousels that point to other sections of your website, then create a separate non-linked blog page hosting those images, which THEN requires some code to not have the carousel be clickable so as not to navigate guests towards those non-linked blog pages? WHY can I not just create a simple carousel of images? The above method I described was derived from this YouTube video: https://www.youtube.com/watch?v=8oCMV3FsIuk&ab_channel=RebeccaGraceDesigns-SquarespaceCodingExpert As a beginner I would have had no idea how to get that carousel to work that way if not for this tutorial. But more frustratingly, I can't fathom why the Summary carousel option can't just allow for a regular series of images to be uploaded directly to it?

Site URL: https://tiffanyhoshihuerta.com/ On the mobile version of my portfolio website, specifically where I utilize a slideshow for my images, there is a large block of white space before and after (as shown in the attached images). Does anyone know what the cause of this is, and how to fix it? I would really appreciate the help. Thanks in advance!

Hi! I'm looking to add a carousel of images to my header on my homepage only. Is there an easy way to do this? It needs to run behind my logo and menu (as shown in the images) and I want it to auto-transition between 3 images. I'm working in fluid editor and the tutorials I've found about this subject seem to be outdated now. Thanks so much guys!

I need help with a code to change the arrow style and to move them, can anybody help me put this code together, I'm struggling to figure this out. ☹️ This is what I have so far: https://piccolo-antelope-5p6t.squarespace.com/you This is what I'm trying to achieve: This is the code I have so far; .sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-carousel-pager { float: none; width: 90px; position: absolute; bottom: -12%; left: 50%; -webkit-transform: translate(-50%); -ms-transform: translate(-50%); transform: translate(-50%); -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; z-index: 9; } .sqs-gallery-design-carousel .sqs-gallery-controls .next::before { color: #000; padding: 12px; } .sqs-gallery-design-carousel .sqs-gallery-controls .previous::before { color: #000; padding: 12px;} Here are arrow links https://static1.squarespace.com/static/5c1b99c7a9e02801f6c9b9d0/t/5f7ecb8774815b7a1d7b677d/1602145159916/arrow-left-testimonials-6.png https://static1.squarespace.com/static/5c1b99c7a9e02801f6c9b9d0/t/5f7ecb98f9dae72f09a0ad46/1602145176384/arrow-right-testimonials-6.png

.user-items-list-carousel__slides-revealer { overflow: hidden; white-space: nowrap; animation: carousel 20s linear infinite; } .user-items-list-carousel__slides-revealer::before, .user-items-list-carousel__slides-revealer::after { content: ""; display: inline-block; width: 100%; } @keyframes carousel { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } i want to create a loop that automatically scrolls

Does anyone know how to custom code the corner radius of the text card in a banner slideshow? I've been looking everywhere and none of the code I've found or written seems to work. Pic attached for what I'm talking about. I have this same block type throughout my site and I need all of the cards to have rounded corners. THANK YOU!

Hello! A question: Is it possible to construct a hover effect for an image carousel section that will display a larger version of the image? https://buttercup-buttercup-tpxb.squarespace.com/ pw: hello Merci! - Leroy

Hi SS group. Im looking to create an automated rolling banner of images on my site, but ive stumbled across a roadblock! I have the solid option, with buttons to scroll through manually, but I like the idea of having it automated. I have none of the drop menus available, which another site its telling me to look for. Ive got the required code for this, but without the options of Banner slideshow or Carousel... it won't work. Any guidance from someone more knowledgable of SS? Thanks!

Hello! I'm wondering if there is a way to add more than one picture (In a carousel of some sort) on the left hand side of my H/R page? I'd love to add more than one headshot but still keep it next to my resume. Thank you so much in advance!!

I need to have an image carousel on the left, with text on the right - multiple times down a page. Like the linked page but the image blocks would be carousels. any help would be greatly appreciated!

Hey there, I have a few questions for whoever can assist! I appreciate your time 🙂 I am trying to achieve a similar carousel that Patagonia has going on. This is the link https://www.patagonia.com/stories/ I am wanting to move my arrows for my summary block carousel to look and function the same way Patagonia has theirs. I have most of the code in place, but it seems like I can't get my arrows in the right spot and the right arrow seems to be running into the container, resulting in it being cut off. Below is my code. Secondly, I am wanting to achieve the same single-scolling left-to-right that you can experience here: https://www.patagonia.com/stories/ Mine moves entirely instead of one column at a time. I am also looking to implement a color hover effect to the arrows. I am wanting it exactly as I have my scrolling up button in the bottom right hand of the website when you scroll down enough. I am having a hard time targeting and adding that hover affect to them. Here is the direct link to the page: https://commongroundbend.org/our-journal and the password to see it is "helpme" .................................... Here's my code so far: .sqs-gallery-design-carousel .sqs-gallery-container { overflow: visible; } //Summary carousel arrows .sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-carousel-pager { float: none; width: 100%; position: absolute; bottom: 35%; left: 51%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; z-index: 9; } .sqs-gallery-design-carousel .sqs-gallery-controls .next::before { background-color: #8abcce; color: #000; font-size: 20px !important; cursor: pointer; font-weight: bold; padding:24px 24px 24px 24px; border-radius: 50%; box-shadow: 1px 4px 5px rgba(0, 0, 0, 0.5); } .sqs-gallery-design-carousel .sqs-gallery-controls .previous::before { background-color: #8abcce; color: #000; font-size: 20px !important; color: #171717; cursor: pointer; font-weight: bold; padding:24px 24px 24px 24px; border-radius: 50%; box-shadow: 1px 4px 5px rgba(0, 0, 0, 0.5); }

Hi All, In our website the top section has a carousel and the footer has contact us and support form. The forms being used are standard forms provided by Squarespace. When a user clicks on 'Contact Us' a POP UP form appears and when the pop is on the screen (and even if user is typing in the form), the form disappears every time the carousel transitions to the next image. The same behavior happens for 'Support' form in the footer as well. Website: www.human.quest -Ashish

Site URL: https://www.history-ink.com/ Hi there, I wondered if you could help me make the images clickable on my carousel, as there seems no obvious way to do it. Note I wish to keep the buttons, but make the images clickable as well. In my portfolio section of the home page, screen shot attached. Thank you!

Hi there, does anyone know how I can set a carousel as a background image on a landing page instead of just 1 static image? And is there a way to get rid of the white background blocks behind options on drop down menus.

Hi Anyone know how to show adjacent items for carousel on mobile view? I've used Will Meyers code to show more than one item Here's what I was thinking: Thanks!

Site URL: https://hexahedron-mandarin-ksp4.squarespace.com/ My client is asking if I can have her navigation & logo overlaid over an image carousel (exactly like this site). I know it's possible with a static image or with a video using the "dynamic" header style–– but I haven't been able to find a built-in solution to mimic the example site. Anyone have thoughts? Pass for site is: redacted

Site URL: https://www.dotdot-shop.com/shop/p/dot-ringlarge-ct8r3-m9y6t Hi, I would like to add carousel navigation dots, that are clickable as well. Thank you in advance! example page : https://www.dotdot-shop.com/shop/p/dot-ringlarge-ct8r3-m9y6t Pw : dotdot-shop

Good day, I need your help. Can anyone figure out why a grey line appears whenever I scroll through my gallery? This appears when I use the arrow keys on my keyboard. Thanks a lot! https://www.ptphotography.com/taj-mahal-india0007-copy

Good day, Please help change the design of my arrow. Here the link of the arrow I want replaced: https://www.ptphotography.com/india-gate-i-india0001 This is the arrow I design I would like to duplicate (I would like it in red if possible): Thank you in advance!

Site URL: https://tmha-new-site.squarespace.com/special-occasions password: tamara Ok so on this page i have the first gallery (personal) set to slideshow and it allows a hover to show the image title and the caption. Is there a way to do this for the second gallery on that page (business) which is a carousel style? Ideally the sizing would be just like the first gallery (image title a little larger than the caption) Also, if i could center this text that would be best.

Site URL: https://kircher-redesign.squarespace.com/process I have an issue regarding Squarespace carousel lists. The carousel I've created is text-heavy, so I want to stop it from auto-scrolling. This way people can read each item and then advance the items at their own pace. Site password is: kircher