7.1 > GALLERY > CUSTOM RIGHT AND LEFT ARROWS (CONTROLS)

Hi @tuanphan,

I have a question for you regarding creating custom “gallery right+left arrows/controls in Squarespace 7.1.

1. I would like to change/create custom gallery “controls”, for the right and left arrow in  Gallery: Slideshow Reel. Do you know how I can do that?

2. I would like to replace the current arrows and use a custom .svg for right and left, example: right.svg and left.svg

3. I would like to set the size of each to 50px x 50px

4. How do I remove the transparent box around the current arrows so only the new svgs for right and left are visible (ie. Floating)?

Preview details below:


Thanks so much for your help!
-Nicholas

Hi @tuanphan - Any thoughts on the above CSS issue? Thanks for your help and support! - NK

This should help with part of what you want, goes into custom css. 

.gallery-fullscreen-slideshow-control-btn-icon svg {
    width: 50px !important;
    height: 50px !important;
}

Thanks @derricksrandomviews. Will give a try.. still working on the full solve!

If you share link to gallery. We can check easier.

On 8/15/2020 at 1:10 PM, derricksrandomviews said:

This should help with part of what you want, goes into custom css. 

.gallery-fullscreen-slideshow-control-btn-icon svg {
    width: 50px !important;
    height: 50px !important;
}

Hey has anyone figured out how to make this work? Since it won't let me upload a svg to Manage Custom Files in Custom CSS, I uploaded a .png file and changed svg to name.png. That didn't work.

How about I give you the complete snippet I use on my site for gallery block slideshows to customize the arrows. The color, size, and background radius can all be changed it won't change the shape of the arrow but will allow other tweaks, who knows you might like it.  

.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: ;
  color: black;
  font-size: 2.5em; /*this changes the size of the arrows*/
  padding: 10px;
  border-radius: 30%; /*remove this is you don't want the background rounded*/
}

is it possible to change the controls for a simple slideshow from arrows to bullets?

On 11/9/2021 at 11:27 PM, trhine said:

is it possible to change the controls for a simple slideshow from arrows to bullets?

You mean change arrows icon to custom bullet icon or change left/right arrows to bottom dots?

is it possible to REMOVE the left right arrows on a gallery block lightshow?  I would also need the left right arrows to be disabled on the keyboard.

17 hours ago, adameus said:

is it possible to REMOVE the left right arrows on a gallery block lightshow?  I would also need the left right arrows to be disabled on the keyboard.

If you share link to page where you use gallery block, we can give code to do this