Summary Carousel Arrow

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

Hi,

The site is private. Can you setup an access password & share url?

@tuanphan Thank you for responding to my message, I published the website for now and it should be live

https://piccolo-antelope-5p6t.squarespace.com/you

On 2/13/2023 at 9:04 PM, Nancygallardo562 said:

@tuanphan Thank you for responding to my message, I published the website for now and it should be live

https://piccolo-antelope-5p6t.squarespace.com/you

Add to Design > Custom CSS

/* Summary block custom arrows */
.sqs-gallery-design-carousel .sqs-gallery-controls .next, .sqs-gallery-design-carousel .sqs-gallery-controls .previous {
    background-image: url(https://static1.squarespace.com/static/5c1b99c7a9e02801f6c9b9d0/t/5f7ecb98f9dae72f09a0ad46/1602145176384/arrow-right-testimonials-6.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.sqs-gallery-design-carousel .sqs-gallery-controls .previous {
    background-image: url(https://static1.squarespace.com/static/5c1b99c7a9e02801f6c9b9d0/t/5f7ecb8774815b7a1d7b677d/1602145159916/arrow-left-testimonials-6.png) !important;
}
.sqs-gallery-design-carousel .sqs-gallery-controls .next:before, .sqs-gallery-design-carousel .sqs-gallery-controls .previous:before {
    visibility: hidden;
}

@tuanphan This is great it worked! But I would really like to place them under the text like the example above, any chance there is a way to do this? The arrows are a tad small too.

On 2/19/2023 at 10:21 AM, Nancygallardo562 said:

@tuanphan This is great it worked! But I would really like to place them under the text like the example above, any chance there is a way to do this? The arrows are a tad small too.

I think we need to use Script code in this case. Which plan do/will you use?