Custom Next/Prev buttons on Simple Slideshow

Site URL: http://www.rbl2021.squarespace.com

Hi all,

How can add custom next/prev arrows on my simple slideshow?

I hope to achieve black bars, like in my screenshot. I really hope this is possible.. thanks!

I don't have the code for bars but if you wanted plain black arrows that you can adjust the size, change the color if you wish and add a re-sizeable background, I have that:

.sqs-gallery-block-slideshow .sqs-gallery-controls .next,
.sqs-gallery-block-slideshow .sqs-gallery-controls .previous {
  background: none; /*removes the original background behind the arrows*/
}
.sqs-gallery-block-slideshow .sqs-gallery-controls .next::before,
.sqs-gallery-block-slideshow .sqs-gallery-controls .previous::before {
  background:none ;
  color: black;
  font-size: 2.5em; /*this changes the size of the arrows*/
  padding: 10px;
  border-radius: 30%; /*remove this if you don't want the background rounded*/
}
 

This code could work for bars but the id would need to be targeted for your site using the correct block id. We would need to see your site to get that. You can do it if you have the block id chrome extension which can be found here. 

https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde

[data-section-id="5f18b027017682694630c735"] .gallery-reel-control:first-of-type .gallery-reel-control-btn-icon::before {
  content: '-';
  font-family: ariel;
  font-size: 80px;
  font-weight: 900;
}

[data-section-id="5f18b027017682694630c735"] .gallery-reel-control:last-of-type .gallery-reel-control-btn-icon::before {
  content: '-';
  font-family: ariel;
  font-size: 80px;
  font-weight: 900;
}

[data-section-id="5f18b027017682694630c735"] .gallery-reel-control svg {
 display: none;
}

[data-section-id="5f18b027017682694630c735"] .gallery-reel-control .gallery-reel-control-btn-icon {
  transform: scaleX(30%);
}

Hi Derrick @derricksrandomviews 
Thanks for your reply. I tried your first section of code in the custom css but nothing changed unfortunately. 

The second options sounds promising, but I don't fully understand how to implement this?

Thanks again, Thomas

P.S. my website is www.rbl2021.squarespace.com. Pass: rbl2021

Do you still need help with this?

Hi Derrick,

This is great and really helpful! Thank you! Is there a way to make the arrows appear outside the image, not overlaid on top?

Thanks,

Rachel

On 1/13/2021 at 8:39 AM, racheljackson said:

Hi Derrick,

This is great and really helpful! Thank you! Is there a way to make the arrows appear outside the image, not overlaid on top?

Thanks,

Rachel

Can you share link to page where you use slideshow? We can check easier.