Jump to content

Trying to change arrows on summary carousel. Help?

Recommended Posts

I am looking to change the two small arrows (< and >) on my summary carousel for testimonials on my webpage. I would like a different image for the arrows and would like to move them to either end of summary carousel display. 

I am not sure how I would go about this, any help would be appreciated! Thanks!

My website is https://oasispainting.ca

Link to comment

@matt1234 That guide is good but it does have an error in it and the arrows may overlap the text, making the testimonial not fully legible. 

Here's a revised version to try:

section[data-section-id="65d8dcbcf210d40479a7b669"] {
.sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-carousel-pager {   
  float: none;   
  width: 120%;   
  position: absolute;   
  bottom: 42%;   
  left: 50%;   
  -webkit-transform: translate(-50%,-35%); 
  -ms-transform: translate(-50%,-35%);
  transform: translate(-50%,-35%);   
  -webkit-box-pack: justify;       
  -ms-flex-pack: justify;           
  justify-content: space-between; 
  }
.sqs-gallery-design-carousel .sqs-gallery-controls .next::before {
background-color: #f5c06a;   
color: #000000;   
padding: 20px; 
border-radius:50%;
content: '▶' !important
 } 
.sqs-gallery-design-carousel .sqs-gallery-controls .previous::before {
background-color: #f5c06a;   
color: #000000;   
padding: 20px;
border-radius:50%;
content: '◀' !important
 }
}

Customize it for your site:

You can add #block-yui_3_17_2_1_1693334706601_32976{ to the beginning and } at the end if you want to apply it only to the slider on your homepage. 

You can modify the arrows by copy/pasting a new unicode character and replacing the symbols (and ) in the below code. Here's a link to a list of viable options: https://insidethesquare.co/unicode-for-squarespace

content: '' !important
content: '
' !important

 

Did I help? Click 👍 or mark it as the solution! This helps others find the answers they need. 

Meghan | Westerly Creative Studio
  
 🍪  Still need your website policies?
Termageddon makes it easy.  
Get 10% off your first year! (< affiliate link) 

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.