Center carousel arrows with image, not whole block

Hi, I have got custom code working on my site home page from several forum posts here to resize, recolour and reposition the carousel arrows. There are four carousel displays on the home page.

I can't figure out how to set the arrows to always be center aligned with the carousel images. I can set them relative to the whole block height, but not the images used in the blocks. Any help appreciated!

Site: https://www.biocommons.org.au/

Existing CSS (mostly from this post 

  //modifying next and previous controls
  .sqs-gallery-design-carousel .sqs-gallery-controls .next,
.sqs-gallery-design-carousel .sqs-gallery-controls .previous {
 display: block;
 float: center;
 position: relative;
  top: auto;
 // left and right settings ensure arrows are visible on  page
 left: -15px;
 right: 15px;
 bottom: auto;
 margin: 0 0 15px 0;
 padding: 0;
 background-color: transparent;
  //color of arrows controlled here
 color: #3c726e !important;
 font-size: 16px;
 line-height: 16px;
 cursor: pointer;
}
//this block modifies the next arrow to be thicker
.sqs-gallery-design-carousel .sqs-gallery-controls .next:before {
 font-family: 'squarespace-ui-font';
 font-style: normal;
 speak: none;
 font-weight: normal;
 -webkit-font-smoothing: antialiased;
 content: "\E003";
 text-align: center;
 display: inline-block;
 vertical-align: middle;
}
//this sets the size of the next arrow
.sqs-gallery-design-carousel .sqs-gallery-controls .next:before {
 font-size: 48px;
 width: 16px;
 height: 32px;
 line-height: 32px;
}
//seems to have no impact
.sqs-gallery-design-carousel .sqs-gallery-controls .previous {
 margin-right: 10px;
}
//this modifies the previous arrow to be thicker
.sqs-gallery-design-carousel .sqs-gallery-controls .previous:before {
 font-family: 'squarespace-ui-font';
 font-style: normal;
 speak: none;
 font-weight: normal;
 -webkit-font-smoothing: antialiased;
 content: "\E000";
 text-align: center;
 display: inline-block;
 vertical-align: middle;
}
//this sets the size of the previous arrow
.sqs-gallery-design-carousel .sqs-gallery-controls .previous:before {
 font-size: 48px;
 width: 16px;
 height: 32px;
 line-height: 32px;
}

//this moves the previous arrow to the left side of the page, rather than adjacent to the next arrow, and drops it to the 40% of the block height measured from the top
 .summary-carousel-pager .previous {
position: absolute !important;
left: -30px !important;
right: inherit !important;
top: 40% !important;
}
//this moves the next arrow to the same depth as the previous arrow
 .summary-carousel-pager .next {
position: absolute !important;
left: inherit !important;
right: 0px !important;
top: 40% !important;
}

Thanks @tuanphan - so is the key here that we're setting the position relative to each individual block div, rather trying to make a site wide change?

It's still not perfect for really small screens, but unless there's a way to set it to always be at 50% of the image height (i.e. ignore any text below the image), I think this will do

On 8/19/2024 at 7:00 AM, PatrickCapon said:

Thanks @tuanphan - so is the key here that we're setting the position relative to each individual block div, rather trying to make a site wide change?

It's still not perfect for really small screens, but unless there's a way to set it to always be at 50% of the image height (i.e. ignore any text below the image), I think this will do

Since the arrow position can only be adjusted based on whole item height, there is no way to adjust it based on image height, so I don't see any way to have universal code for all carousels

Ok no problem, thanks