Change Arrow Carousel design

Good day, 

Please help change the design of my arrow.

Here the link of the arrow I want replaced:

https://www.ptphotography.com/india-gate-i-india0001

This is the arrow I design I would like to duplicate (I would like it in red if possible):

Thank you in advance!

.user-items-list-carousel__arrow-container svg {
	display: none;
}

.user-items-list-carousel__arrow-button.user-items-list-carousel__arrow-button--right div {
	background-image: url("url of png of your right arrow");
  	background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    width: 30px;
    height: 30px;
}

.user-items-list-carousel__arrow-button.user-items-list-carousel__arrow-button--left div {
	background-image: url("url of png of your left arrow");
  	background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    width: 30px;
    height: 30px;
}

Try adding this to Design > Custom CSS.
You will have to upload a png for each arrow, one left and one right.

On 1/5/2023 at 6:25 PM, timprsn said:

.user-items-list-carousel__arrow-container svg {
	display: none;
}

.user-items-list-carousel__arrow-button.user-items-list-carousel__arrow-button--right div {
	background-image: url("url of png of your right arrow");
  	background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    width: 30px;
    height: 30px;
}

.user-items-list-carousel__arrow-button.user-items-list-carousel__arrow-button--left div {
	background-image: url("url of png of your left arrow");
  	background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    width: 30px;
    height: 30px;
}

Try adding this to Design > Custom CSS.
You will have to upload a png for each arrow, one left and one right.

@timprsn Thank you so much for reaching out.  I have tried applying this but it didn't work for me. Here is the code I applied:

.user-items-list-carousel__arrow-container svg {
	display: none;
}

.user-items-list-carousel__arrow-button.user-items-list-carousel__arrow-button--right div {
	background-image: url("https://static1.squarespace.com/static/5ecaa390dc0263594e112004/t/63bd203b0651752a4e494c11/1673338939042/right.png");
  	background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    width: 30px;
    height: 30px;
}

.user-items-list-carousel__arrow-button.user-items-list-carousel__arrow-button--left div {
	background-image: url("https://static1.squarespace.com/static/5ecaa390dc0263594e112004/t/63bd204aa3107f3ecd913c63/1673338954062/left.png");
  	background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    width: 30px;
    height: 30px;
}

Please advise what I did wrong. Thank you!

@tuanphan you are amazing thank you so much!

Last favour, how do apply the same arrow on mobile?

Thank you!

On 1/14/2023 at 8:24 PM, tuanphan said:

Use this new code

.user-items-list-carousel__arrow-container svg {
	display: none;
}

.user-items-list-carousel__arrow-button.user-items-list-carousel__arrow-button--right div {
	background-image: url("https://static1.squarespace.com/static/5ecaa390dc0263594e112004/t/63bd203b0651752a4e494c11/1673338939042/right.png");
  	background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    width: 30px;
    height: 30px;
	visibility: visible !important;
}

.user-items-list-carousel__arrow-button.user-items-list-carousel__arrow-button--left div {
	background-image: url("https://static1.squarespace.com/static/5ecaa390dc0263594e112004/t/63bd204aa3107f3ecd913c63/1673338954062/left.png");
  	background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    width: 30px;
    height: 30px;
	visibility: visible !important;
}

 

@tuanphan is it possible to use these custom arrow on mobile view too? 

is it possible to add same custom dot on mobile view too instead of arrow at the bottom of mobile view.

On 5/17/2023 at 8:21 AM, pexeldio said:

@tuanphan is it possible to use these custom arrow on mobile view too? 

Use this

/* List Carousel - Custom Arrows */
button.mobile-arrow-button svg {
    background-color: transparent !important;
    visibility: hidden;
}

button.user-items-list-carousel__arrow-button--left div, button.mobile-arrow-button.mobile-arrow-button--left div {
    background-image: url(https://cdn.pixabay.com/photo/2023/03/24/23/06/goat-7874883_1280.jpg) !important;
background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}
button.user-items-list-carousel__arrow-button--right div, button.mobile-arrow-button.mobile-arrow-button--right div {
    background-image: url(https://cdn.pixabay.com/photo/2023/03/30/10/54/leopard-7887407_640.png) !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

Can you share link to this site? We can check easier