THAT Branding Company

View Original

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;

}

}