Replace Banner Slideshow arrows with custom SVG

Site URL: https://roadrunner-echidna-9e76.squarespace.com/

PW: ephemora2k22

I've figured out the CSS to change the stroke color and width of the existing arrows, and to remove or change the shape of the encapsulating circles, but I have a custom arrow I'm using throughout the site and would like to insert that in place of the built-in arrows for consistency. How do I do this?

This is the code I currently have affecting the banner slideshow auto-layout:

.user-items-list-banner-slideshow .user-items-list-banner-slideshow__arrow-icon-background {
  opacity: 0;
}
.user-items-list-banner-slideshow .user-items-list-banner-slideshow__arrow-icon-foreground {
  stroke: @blue;
}
.user-items-list-banner-slideshow .user-items-list-banner-slideshow__arrow-icon-path {
  stroke-width: 3px;
}

The first screenshot is the results of this code. The second screenshot is what I want it to look like. I've included the HTML for my custom SVG arrow below.

<svg class="custom-arrow" version="1.1" id="arrow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 22.91 10.19" style="enable-background:new 0 0 22.91 10.19;" xml:space="preserve">
<path class="arrow" d="M15.39,0h-0.88v4.08H0v2.04h14.52v4.08h0.88l7.52-4.45v-1.3L15.39,0z M16.07,7.66V2.53l4.46,2.57L16.07,7.66z"/>
</svg>

I would suggest that you should upload the SVG to your website, and then use this CSS and in the content add the URL for the svg.

29 minutes ago, Ziggy said:

I would suggest that you should upload the SVG to your website, and then use this CSS and in the content add the URL for the svg.

 

Thank you!! This was the exact starting point I needed. Here's the CSS and a screenshot of the final result, as well as some notes:

section[data-section-id="633754fe7c506e2e4e13c01a"] {
  .user-items-list-banner-slideshow .user-items-list-banner-slideshow__arrow-icon-background {
  opacity: 0;
}
  svg.user-items-list-banner-slideshow__arrow-icon {
    display: none !important;
  }
  button.user-items-list-banner-slideshow__arrow-button--left:before {
    content: @blue-arrow-left;
    display: block;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    opacity: 1;
  }
  button.user-items-list-banner-slideshow__arrow-button--right:before {
    content: @blue-arrow-right;
    display: block;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    opacity: 1;
  }
}

So first I had to keep my CSS of removing the circle backgrounds of the arrows.

I uploaded my SVG files in their proper color (because you can't customize color of uploaded SVGs in CSS) to a disabled page and defined them using this code at the top of my CSS document:

@blue-arrow-right: url('/s/Ephemora-Arrow-BlueRight.svg');
@blue-arrow-left: url('/s/Ephemora-Arrow-BlueLeft.svg');

So those are what's referenced in the code above. I also wanted them a little smaller, so I set the width to 70% and centered them in their containers with the margin properties.

Lastly, for some reason the :after pseudo-element  on the right arrow meant that once I had clicked on the right arrow, it disappeared until I clicked on the left arrow. I don't know why this happened. But changing it to a :before pseudo-element, as it is with the left arrow, fixed this issue. I don't understand this, but it worked so I'm rolling with it.

Thank you to you and @tuanphan for the help!

19 minutes ago, knockout said:

I don't understand this, but it worked so I'm rolling with it.

That works!