Jump to content

Custom Next/Prev buttons on Simple Slideshow

Recommended Posts

  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

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. 


[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%);
Edited by derricksrandomviews
Link to comment
  • 4 weeks later...
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?



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

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.