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...