Slideshow navigation custom CSS

Site URL: https://www.uncommongoods.studio

Hello,

I'm hoping to replace the slideshow navigation arrows to text nav like the example below. Could anyone advise on how to do this? 🙏

https://www.2xelliott.co.uk

Many thanks in advance!

Above link doesn't exist.

here is a tutorial I've used to customize those arrows that's worked great! https://thirtyeightvisuals.com/blog/custom-arrows-testimonial-carousel-squarespace

Apologies, I've just edited the URL, should work now

To replace the arrows, use this. To make the floating prev/next cursors would be more involved.

[data-section-id="5f0c8246f812da717b1a434c"] .gallery-reel-control:first-of-type .gallery-reel-control-btn-icon::before {
  content: 'Prev';
  word-wrap: normal;
  top: 2px;
  position: absolute;
  left: -1px;
}

[data-section-id="5f0c8246f812da717b1a434c"] .gallery-reel-control:last-of-type .gallery-reel-control-btn-icon::before {
  content: 'Next';
  word-wrap: normal;
  top: 2px;
  position: absolute;
  left: -1px;
}

[data-section-id="5f0c8246f812da717b1a434c"] .gallery-reel-control .gallery-reel-control-btn-icon svg {
  visibility: hidden;
}

On 8/8/2020 at 12:51 PM, rwp said:

To replace the arrows, use this. To make the floating prev/next cursors would be more involved.

[data-section-id="5f0c8246f812da717b1a434c"] .gallery-reel-control:first-of-type .gallery-reel-control-btn-icon::before {
  content: 'Prev';
  word-wrap: normal;
  top: 2px;
  position: absolute;
  left: -1px;
}

[data-section-id="5f0c8246f812da717b1a434c"] .gallery-reel-control:last-of-type .gallery-reel-control-btn-icon::before {
  content: 'Next';
  word-wrap: normal;
  top: 2px;
  position: absolute;
  left: -1px;
}

[data-section-id="5f0c8246f812da717b1a434c"] .gallery-reel-control .gallery-reel-control-btn-icon svg {
  visibility: hidden;
}

Thank you so much for this. A couple of final things: how can I change the type to a specific heading style stipulated on Squarespace? And finally how can I remove those white boxes? Thanks!

 

You have to add the font family, size, etc to the css for the button.

For the white box

.gallery-reel-control-btn::before {
  background: transparent !important;
}

On 8/10/2020 at 3:04 AM, rwp said:

You have to add the font family, size, etc to the css for the button.

For the white box

.gallery-reel-control-btn::before {
  background: transparent !important;
}

Perfect, many thanks!