Squarespace Change Carousel Arrows

Squarespace list Carousels are easy and best way to showcase content in an organized and managed way. The default arrows sometimes does not look unique and match with your brand identity. One can change the color of these arrows using design settings and can also make it more beautiful and attractive using custom CSS.

Squarespace Change Carousel Arrows

In this tutorial you will learn all about how to change Carousel Arrows or icon image in Squarespace.

How to Turn Squarespace Carousel Background Circle to Square

To turn carousel circles to square go to Squarespace Website then Pages and then under utilities go to Website Tools.

How to Turn Squarespace Carousel Background Circle to Square

Now go to Custom CSS and copy the code given below and paste there.

/* carousel square */ .user-items-list-carousel__arrow-button{ border-radius:0!important } .user-items-list-carousel .mobile-arrow-icon-background-area{ border-radius:0!important } .user-items-list-carousel .mobile-arrow-button{ overflow:visible!important }

How to Change the width of Carousel Arrow

To change the width of arrows of the carousel copy the code given below and paste it in custom CSS on your website.

/* arrow width & edge - carousel*/ .user-items-list-carousel__arrow-icon-path{ stroke-width:5px; stroke-linecap:square; }

How to Add a Custom Image to Squarespace Carousel Arrow

To add a custom arrow images first of all upload your image files to Squarespace.

Now copy the code given below and add it your website and also replace your left and right images url.

/* custom arrow - carousel */ .user-items-list-carousel__arrow-icon-foreground, .user-items-list-carousel .mobile-arrow-icon-background-area{ opacity:0; } .user-items-list-carousel__arrow-button--left .user-items-list-carousel__arrow-icon-background, .user-items-list-carousel .mobile-arrow-button--left{ background-image:url(left-image-url-here)!important; background-size: cover; } .user-items-list-carousel__arrow-button--right .user-items-list-carousel__arrow-icon-background, .user-items-list-carousel .mobile-arrow-button--right{ background-image:url(right-image-url-here)!important; background-size: cover; }
Previous Post
No Comment
Add Comment
comment url