Slideshow Nav Arrows

Hello,

After adding a Slideshow to a page the html source code shows:

http://www.smugmug.com/photos/1958336867_z422z4t-O.png
http://www.smugmug.com/photos/1958336862_VJJkzTT-O.png

How can the images be modified/replaced?

Thanks,
Jason

Hey Jason,

Thanks for getting in touch! The only way to override that is via custom CSS. Also, you’ll have to follow the format of the images you posted above. It should be the exact image size and exact distance(between the hover state and normal state). If you don’t you’ll probably have to add more custom CSS for it to work. You can try the snippet below once you achieve that, provided you change the URLs.

/* Change left arrow button on BB slideshow */
.fl-slideshow-image-nav-left .fl-slideshow-nav-buttons a {
  background: url('http://www.smugmug.com/photos/1958336862_VJJkzTT-O.png') left center no-repeat !important;
}
/* Change right arrow button on BB slideshow */
.fl-slideshow-image-nav-right .fl-slideshow-nav-buttons a {
  background: url('http://www.smugmug.com/photos/1958336867_z422z4t-O.png') right center no-repeat !important;
}

Hope this helps!

Ben

Hey Ben,

Thank you for your prompt response.

That code worked perfectly, thank you.

Will this be put in the next update?

Thanks again.
Jason

Hey Jason,

No worries! Do you mean the ability to change the slideshow arrows? I’m not really quite sure about that. You can always head over to our User Voice though to make a suggestion.

Ben

Ok. Thanks Ben. I’ll do that.