Summary Block Carousel & Carousel Arrows

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);
}

Hello there,

I think there isn't an easy way to achieve your desired results regarding how the cards scroll to the left or right. However, the arrows are more easily fixed. 

.sqs-gallery-design-carousel .sqs-gallery-controls .next, .sqs-gallery-design-carousel .sqs-gallery-controls .previous {
margin: 0 15px 15px 0 !important;
}

If you want a more robust slider/carousel, I'd look into using Swiper.JS or similar Javascript library. You can target the above selectors for further customization as well.

Best,

Dan

I appreciate it @Wolfsilon

Another thing I could get help with is the hover affect on my basic grid blog page. I am trying to have the hover overlay on the whole thumbnail including the background section with words, but currently it's only targeting the image. 

Thoughts? 

https://commongroundbend.org/blog pw='helpme'

On 8/22/2022 at 3:29 AM, lunacyharris said:

I appreciate it

Another thing I could get help with is the hover affect on my basic grid blog page. I am trying to have the hover overlay on the whole thumbnail including the background section with words, but currently it's only targeting the image. 

Thoughts? 

https://commongroundbend.org/blog pw='helpme'

Can you add some blog posts? Currently we don't see any posts to check hover code

My bad. Once you're on the blog page, click "view all." That'll bring up the basic grid. I have the hover effect working on the carousel, but not yet on the blog grid. 

The other main thing I'm working on is implementing full-width images within my blog posts while keeping the title and text blocks within the narrow width on (7.1). Can't seem to find the solution. 

I appreciate your time

On 8/26/2022 at 4:10 AM, lunacyharris said:

My bad. Once you're on the blog page, click "view all." That'll bring up the basic grid. I have the hover effect working on the carousel, but not yet on the blog grid. 

The other main thing I'm working on is implementing full-width images within my blog posts while keeping the title and text blocks within the narrow width on (7.1). Can't seem to find the solution. 

I appreciate your time

Where is view all?

Hi, I'm also trying to figure out an issue with our site that we are building. We have three blocks on our homepage that use arrows, summar, gallery reel, and carousel list block. However, we can't get the summary block to have the same arrows as the other two. So we've opted to put them below the photos instead of on the side like the gallery and carousel block. The issue is we need to use an svg arrow in the summary block arrow spot to get them the same. Does anyone know if this is possible or how to do it?

On 1/7/2023 at 11:35 AM, klashhouse said:

Hi, I'm also trying to figure out an issue with our site that we are building. We have three blocks on our homepage that use arrows, summar, gallery reel, and carousel list block. However, we can't get the summary block to have the same arrows as the other two. So we've opted to put them below the photos instead of on the side like the gallery and carousel block. The issue is we need to use an svg arrow in the summary block arrow spot to get them the same. Does anyone know if this is possible or how to do it?

You can share link to this page, we can give some code to change arrows style

Great! the website is https://www.cityfestmovements.org/ and the pw is cityfest

Thank you!

On 1/10/2023 at 12:37 AM, klashhouse said:

Great! the website is https://www.cityfestmovements.org/ and the pw is cityfest

 

Thank you!

Hi,

You mean change these arrows style?

Yes, to look like the other arrows on the site...

Hi @tuanphan! I'm trying to achieve similar carousel arrow placement as the OP. I thought I had them perfect (first attachment), but realized that if the screen size changes at all, the arrows do not stay in the desired position (second attachment). I suspect this is due to using a percentage value for bottom? Is there a way to 'anchor' them so that they always remain in line with the carousel text? 

On 4/18/2023 at 1:49 AM, mbockmaster said:

Hi @tuanphan! I'm trying to achieve similar carousel arrow placement as the OP. I thought I had them perfect (first attachment), but realized that if the screen size changes at all, the arrows do not stay in the desired position (second attachment). I suspect this is due to using a percentage value for bottom? Is there a way to 'anchor' them so that they always remain in line with the carousel text? 

What is page url?

https://www.andasanas.com/home-new pw: 140ann 🙂

Hi @tuanphan, just curious if you were able to take a look? The client's grand opening is this week so it's crunch time for me.

Don't remove any code in your current code

Add to Design > Custom CSS

/* Summary arrows */
.sqs-gallery-design-carousel .sqs-gallery-container {
    position: relative;
}
div#block-yui_3_17_2_1_1679436822725_6064 .summary-carousel-pager {
    position: absolute;
    bottom: -10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

Hi @tuanphan, this position worked well for the arrows, but the summary titles aren't clickable (I figure because the arrow container is on top of them?). I gave them a lower z-index, to put them behind the titles, but now the titles can't be clicked. I even changed the summary title width to 70% with a margin of 0 auto to centre them, thinking that the arrow links would be clickable then with no luck.

Is there a way to have both the arrows and summary title be clickable in this position?

On 5/3/2023 at 11:22 PM, mbockmaster said:

Hi @tuanphan, this position worked well for the arrows, but the summary titles aren't clickable (I figure because the arrow container is on top of them?). I gave them a lower z-index, to put them behind the titles, but now the titles can't be clicked. I even changed the summary title width to 70% with a margin of 0 auto to centre them, thinking that the arrow links would be clickable then with no luck.

Is there a way to have both the arrows and summary title be clickable in this position?

It still looks fine, still clickable to me. Do you have a quick video?

14 hours ago, tuanphan said:

It still looks fine, still clickable to me. Do you have a quick video?

Yes! https://watch.screencastify.com/v/qgso2OxwfW9oEdCkmUFS

This page is https://andasanas.com/events

On 5/7/2023 at 1:11 AM, mbockmaster said:

Yes! https://watch.screencastify.com/v/qgso2OxwfW9oEdCkmUFS

This page is https://andasanas.com/events

Don't remove any code in your current code. Add this to Design > Custom CSS

section[data-section-id="64396857e07e6a52b47f4e0f"] {
div.summary-content {
    position: relative;
    z-index: 9999999999999999 !important;
}
 .sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-carousel-pager {
    width: auto !important;
    position: static !important;
    transform: unset !important;
}
span.previous {
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    z-index: 9999999 !important;
}
span.next {
     position: absolute !important;
   right: 0 !important;
    bottom: 0 !important;
    z-index: 9999999 !important;
}
.summary-item-list-container {
    position: relative !important;
}}

6 hours ago, tuanphan said:

Don't remove any code in your current code. Add this to Design > Custom CSS

section[data-section-id="64396857e07e6a52b47f4e0f"] {
div.summary-content {
    position: relative;
    z-index: 9999999999999999 !important;
}
 .sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-carousel-pager {
    width: auto !important;
    position: static !important;
    transform: unset !important;
}
span.previous {
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    z-index: 9999999 !important;
}
span.next {
     position: absolute !important;
   right: 0 !important;
    bottom: 0 !important;
    z-index: 9999999 !important;
}
.summary-item-list-container {
    position: relative !important;
}}

 

THANK YOU @tuanphan!!!!!!!! You're a genius. This works perfectly! I do have this style of carousel on several pages. Is there a way to apply this to summary carousels only so I can use it globally rather than per section? I attempted it but it's applying to my summary grids as well.

On 5/9/2023 at 10:29 PM, mbockmaster said:

THANK YOU @tuanphan!!!!!!!! You're a genius. This works perfectly! I do have this style of carousel on several pages. Is there a way to apply this to summary carousels only so I can use it globally rather than per section? I attempted it but it's applying to my summary grids as well.

 

Use this code instead

div.summary-content {
    position: relative;
    z-index: 9999999999999999 !important;
}
 .sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-carousel-pager {
    width: auto !important;
    position: static !important;
    transform: unset !important;
}
span.previous {
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    z-index: 9999999 !important;
}
span.next {
     position: absolute !important;
   right: 0 !important;
    bottom: 0 !important;
    z-index: 9999999 !important;
}
.summary-item-list-container {
    position: relative !important;
}

4 hours ago, tuanphan said:

Use this code instead

div.summary-content {
    position: relative;
    z-index: 9999999999999999 !important;
}
 .sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-carousel-pager {
    width: auto !important;
    position: static !important;
    transform: unset !important;
}
span.previous {
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    z-index: 9999999 !important;
}
span.next {
     position: absolute !important;
   right: 0 !important;
    bottom: 0 !important;
    z-index: 9999999 !important;
}
.summary-item-list-container {
    position: relative !important;
}

 

thank you, thank you, thank you!!!!!!

Hi, @tuanphan I am also looking for some help with the positioning of carousel summary block arrows on mobile - I am hoping to either move the arrows below and center, (or just bring them in slightly so they're not cut off) on mobile view only (keeping their current position for all other screen sizes).

Here is the code I have:

 

//SUMMARY BLOCK ARROW STYLING + POSITION//

//arrow position outside//
.summary-carousel-pager .previous {
  position: absolute !important;
  left: -60px !important;
  right: inherit !important;
  top: 39% !important;
    color:black !important;
}

  .summary-carousel-pager .next {
  position: absolute !important;
  left: inherit !important;
  right: -40px !important;
  top: 39% !important;
    color:black !important;
}

.sqs-block-summary-v2 .summary-block-wrapper.sqs-gallery-design-carousel .summary-carousel-pager {
  display:flex;
  flex-direction:row;
  justify-content:space-between;
}

//arrow size//
.sqs-gallery-controls .next:before {
font-size: 30px !important;
width: 32px !important;
height: 32px !important;
line-height: 32px !important;
}

 .sqs-gallery-controls .previous:before {
font-size: 30px !important;
width: 32px !important;
height: 32px !important;
line-height: 32px !important;
}

//arrow circles//

.summary-carousel-pager .previous {
  border-radius:50%;
  border:2px solid #241479;
  background:#FF91BF !important;
  padding:9px 10px !important;
  overflow:hidden;

}
  
  .summary-carousel-pager .next {
  border-radius:50%;
  border:2px solid #241479;
    background:#FF91BF !important;
  padding:9px 10px !important;
  overflow:hidden;
}

//summary block blog titles//
.summary-title {
margin-top:25%;
margin-bottom:15px;
font-family:'Brice Bold SemiCondensed' !important;

}

/* Increase space between carousel summary block image and title */
.sqs-gallery-design-carousel .summary-title{
  margin-top: 30px; /* Adjust the margin value as needed */
}

//SUMMARY BLOCK THUMBNAIL STYLING //

 .summary-thumbnail-container {
   border:1px solid #241479;
   border-radius:10px;
   overflow:hidden;
  }

Website url:  gemini-alcott.squarespace.com/meet-the-stars
Password: astroland

Screenshot attached for how it looks on mobile currently.

Any help would be amazing thank you! 🙂

On 6/13/2023 at 9:46 PM, Kate_B said:

Hi, @tuanphan I am also looking for some help with the positioning of carousel summary block arrows on mobile - I am hoping to either move the arrows below and center, (or just bring them in slightly so they're not cut off) on mobile view only (keeping their current position for all other screen sizes).

Here is the code I have:

 

//SUMMARY BLOCK ARROW STYLING + POSITION//

//arrow position outside//
.summary-carousel-pager .previous {
  position: absolute !important;
  left: -60px !important;
  right: inherit !important;
  top: 39% !important;
    color:black !important;
}

  .summary-carousel-pager .next {
  position: absolute !important;
  left: inherit !important;
  right: -40px !important;
  top: 39% !important;
    color:black !important;
}

.sqs-block-summary-v2 .summary-block-wrapper.sqs-gallery-design-carousel .summary-carousel-pager {
  display:flex;
  flex-direction:row;
  justify-content:space-between;
}

//arrow size//
.sqs-gallery-controls .next:before {
font-size: 30px !important;
width: 32px !important;
height: 32px !important;
line-height: 32px !important;
}

 .sqs-gallery-controls .previous:before {
font-size: 30px !important;
width: 32px !important;
height: 32px !important;
line-height: 32px !important;
}

//arrow circles//

.summary-carousel-pager .previous {
  border-radius:50%;
  border:2px solid #241479;
  background:#FF91BF !important;
  padding:9px 10px !important;
  overflow:hidden;

}
  
  .summary-carousel-pager .next {
  border-radius:50%;
  border:2px solid #241479;
    background:#FF91BF !important;
  padding:9px 10px !important;
  overflow:hidden;
}

//summary block blog titles//
.summary-title {
margin-top:25%;
margin-bottom:15px;
font-family:'Brice Bold SemiCondensed' !important;

}

/* Increase space between carousel summary block image and title */
.sqs-gallery-design-carousel .summary-title{
  margin-top: 30px; /* Adjust the margin value as needed */
}

//SUMMARY BLOCK THUMBNAIL STYLING //

 .summary-thumbnail-container {
   border:1px solid #241479;
   border-radius:10px;
   overflow:hidden;
  }

Website url:  gemini-alcott.squarespace.com/meet-the-stars
Password: astroland

Screenshot attached for how it looks on mobile currently.

Any help would be amazing thank you! 🙂

Move this?