Jump to content

Customise Summary Block Carousel Arrow

Recommended Posts

Hi there, I'm reaching out for your assistance! I'm currently working on a summary block and need help with a code to modify the arrow style and reposition them up and down instead of side by side. I'm having difficulty putting together the code, and any help would be greatly appreciated. Can anyone assist me in tackling this challenge? Thank you!

page be found: Home

url: https://puma-paddlefish-k7zy.squarespace.com/

Password: Love365

This is what it currently looks like: 

Screenshot2023-12-11at16_31_29.thumb.png.cb047650ffe9b175b564f538a7dcbf74.png 

 

And this is what i am trying to achieve: 

 

Screenshot2023-12-11at16_34_29.png.12405d57dbf9bac77d461773d46c804e.png

 

Code i have : 

/* Summary block custom arrows */
.sqs-gallery-design-carousel .sqs-gallery-controls .next, .sqs-gallery-design-carousel .sqs-gallery-controls .previous {
    background-image: url(https://static1.squarespace.com/static/5c1b99c7a9e02801f6c9b9d0/t/5f7ecb98f9dae72f09a0ad46/1602145176384/arrow-right-testimonials-6.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
   
  float: none;   
  width: 90px;   
  position: absolute;   
  bottom: -12%;   
  left: 50%;   
  -webkit-transform: translate(-50%);       -ms-transform: translate(-50%);           transform: translate(-50%);   
  -webkit-box-pack: center;       
  -ms-flex-pack: center;           justify-content: center;   z-index: 9; } 

.sqs-gallery-design-carousel .sqs-gallery-controls .next::before {  color: #000;   padding: 12px; } 

.sqs-gallery-design-carousel .sqs-gallery-controls .previous::before {   color: #000;   padding: 12px; } 

.sqs-gallery-design-carousel .sqs-gallery-controls .next::before {  color: #000;   padding: 0px; } 

.sqs-gallery-design-carousel .sqs-gallery-controls .previous::before {   color: #000;   padding: 0px;
  
}
.sqs-gallery-design-carousel .sqs-gallery-controls .previous {
    background-image: url(https://static1.squarespace.com/static/5c1b99c7a9e02801f6c9b9d0/t/5f7ecb8774815b7a1d7b677d/1602145159916/arrow-left-testimonials-6.png) !important;
}
.sqs-gallery-design-carousel .sqs-gallery-controls .next:before, .sqs-gallery-design-carousel .sqs-gallery-controls .previous:before {
    visibility: hidden;
}

 

Link to comment
  • Replies 1
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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.