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