Jump to content

Change Arrow Carousel design

Go to solution Solved by tuanphan,

Recommended Posts

.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.

Link to comment
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!

Link to comment
  • Solution
On 1/10/2023 at 3:27 PM, Ptphotography said:

@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!

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.