Config option to replace prev and next arrow button SVGs?

[melbazany]

I recognize that there's a template option to replace the closeButton, but can't seem to do the same for the previous and next Fancybox carousel buttons. Am I missing this in the docs, or is this no longer allowed? I believe it used to be via CSS in previous versions. Here's what I've tried with no luck:

const carouselOptions = { tpl: { prevButton:'<button title="Previous" class="fancybox-nav fancybox-prev" href="javascript:;"><span>PREVIOUS</span></button>', nextButton:'<button title="Next" class="fancybox-nav fancybox-next" href="javascript:;"><span>NEXT</span></button>', prevBtn:'<button title="Previous" class="fancybox-nav fancybox-prev" href="javascript:;"><span>PREVIOUS</span></button>', nextBtn:'<button title="Next" class="fancybox-nav fancybox-next" href="javascript:;"><span>NEXT</span></button>', prev:'<button title="Previous" class="fancybox-nav fancybox-prev" href="javascript:;"><span>PREVIOUS</span></button>', next:'<button title="Next" class="fancybox-nav fancybox-next" href="javascript:;"><span>NEXT</span></button>', },

[ZackaryZillmer3rt]

hi @melbazany
According to the Fancybox documentation, the tpl option is used to customize the HTML structure of the Fancybox content container, not the carousel buttons. To customize the carousel buttons, you can use CSS to style the existing buttons or create new buttons with your desired HTML structure and use JavaScript to replace the existing buttons with your custom buttons.

[fancyapps]

Hi,

Fancybox5 is built around the Carousel component, and the navigation arrows are simply created using the Carousel Navigation plugin. So, you can customize their template like this:

Fancybox.bind('[data-fancybox="gallery"]', {
  Carousel : {
    Navigation: {
      prevTpl:
      '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11 5l-7 7 7 7"/><path d="M4 12h16"/></svg>',
      nextTpl:
      '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M4 12h16"/><path d="M13 5l7 7-7 7"/></svg>',
    },
  }
});  

Quick tip: use CSS variables to customize colors, dimensions, etc, example:

.fancybox__nav {
  --f-button-bg: rgba(24, 24, 27, 0.5);
  --f-button-hover-bg: rgba(24, 24, 27, 0.7);
  --f-button-active-bg: rgba(24, 24, 27, 0.9);
  --f-button-svg-stroke-width: 2;
}

Demo - https://jsfiddle.net/kc1g2txw/

[melbazany]

Much appreciated; just needed to nest that Navigation object within the Carousel. That was my issue.