Custom SVG arrows on Carousel using people section

Make sure you upload your SVG using the “highlight some text” method. The reference those in the code below:

// Reference your arrows here

@niah-arrow-right:url('/s/TESTNiah-Arrow.svg');

@niah-arrow-left:url('/s/TEST-Niah-Arrow-L.svg');

//target specific section

section[data-section-id="6621253b0869895c64ea6cb5"]

{

//remove current arrow and styling

.user-items-list-carousel__arrow-icon-background.user-items-list-carousel__arrow-icon-background-area

{opacity: 0;}

svg.user-items-list-carousel__arrow-icon {

display: none !important;}

//add new arrow and styling - left

button.user-items-list-carousel__arrow-button--left:before {

content: @niah-arrow-left;

display: block;

width: 100%;

margin-left: auto;

margin-right: auto;

opacity: 1;

}

//add new arrow and styling - right

button.user-items-list-carousel__arrow-button--right:before {

content: @niah-arrow-right;

display: block;

width: 100%;

margin-left: auto;

margin-right: auto;

opacity: 1;

}

}