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