Edit the Slideshow Gallery Arrow

What does this code do?

This code snippet will allow you to change the arrow on a Slideshow Gallery Section in Squarespace 7.1.

Add Your Slideshow

First, click to add a Section and choose a Gallery from the Images Section. Then click to edit the section and make sure one of the Slideshows are selected.

Slideshow: Simple

Option 1: Edit the Size and Thickness of the Arrow

Copy and paste this code into Custom CSS.

/* Gallery Slideshow Simple Arrow */
.gallery-slideshow-control-btn-icon svg{
  stroke-width: 3px; //thickness
  width: 20px !important; 
  height: 30px !important;
}

Then change the thickness, width, and height of the arrows.

Option 2: Change the Arrow to a Different Arrow

Copy and paste this code into Custom CSS.

/* Gallery Slideshow Simple Arrow */
.gallery-slideshow-control-btn-icon {
  display: none;
}
.gallery-slideshow-control-btn::after {
  color: black; //arrow color
  font-size: 50px; //arrow size
  line-height: 10px; //this helps center the arrow
}
.gallery-slideshow-control-btn[aria-label="Previous Slide"]::after {
  content: "\27F5"; //previous arrow
}
.gallery-slideshow-control-btn[aria-label="Next Slide"]::after {
  content: "\27F6"; //next arrow
}

Then change the color and size. You can change the arrow by using the CSS code of any Unicode Character. You can see a list of unicode arrows here.

Slideshow: Full

Option 1: Edit the Size and Thickness of the Arrow

Copy and paste this code into Custom CSS.

/* Gallery Slideshow Full Arrow */
.gallery-fullscreen-slideshow-control-btn-icon svg{
  stroke-width: 3px; //thickness
  width: 20px !important; 
  height: 30px !important;
}

Then change the thickness, width, and height of the arrows.

Option 2: Change the Arrow to a Different Arrow

Copy and paste this code into Custom CSS.

/* Gallery Slideshow Full Arrow */
.gallery-fullscreen-slideshow-control-btn-icon {
  display: none;
}
.gallery-fullscreen-slideshow-control-btn::after {
  color: black; //arrow color
  font-size: 50px; //arrow size
  line-height: 10px; //this helps center the arrow
}
.gallery-fullscreen-slideshow-control-btn[aria-label="Previous Slide"]::after {
  content: "\27F5"; //previous arrow
}
.gallery-fullscreen-slideshow-control-btn[aria-label="Next Slide"]::after {
  content: "\27F6"; //next arrow
}

Then change the color and size. You can change the arrow by using the CSS code of any Unicode Character. You can see a list of unicode arrows here.

Slideshow: Reel

Option 1: Edit the Size and Thickness of the Arrow

Copy and paste this code into Custom CSS.

/* Gallery Slideshow Reel Arrow */
.gallery-reel-slideshow-control-btn-icon svg{
  stroke-width: 3px; //thickness
  width: 20px !important; 
  height: 30px !important;
}

Then change the thickness, width, and height of the arrows.

Option 2: Change the Arrow to a Different Arrow

Copy and paste this code into Custom CSS.

/* Gallery Slideshow Reel Arrow */
.gallery-reel-control-btn-icon {
  display: none;
}
.gallery-reel-control-btn::after {
  color: black; //arrow color
  font-size: 50px; //arrow size
  line-height: 10px; //this helps center the arrow
  position: relative;
  width: 50px;
  height: 50px;
}
.gallery-reel-control-btn[aria-label="Previous Slide"]::after {
  content: "\27F5"; //previous arrow
}
.gallery-reel-control-btn[aria-label="Next Slide"]::after {
  content: "\27F6"; //next arrow
}

Then change the color and size. You can change the arrow by using the CSS code of any Unicode Character. You can see a list of unicode arrows here.

How To Use It

1. Copy and paste the code as indicated above.

2. Then customize the CSS.

3. Change the arrow using the CSS code of any Unicode Character. You can see a list of unicode arrows here.