如何将自定义的下一个/上一个按钮添加到 fsLightbox？

Question

I'm using a lightbox plugin called fsLightbox ( https://fslightbox.com ). I need to add custom next/previous buttons but I don't understand how. I don't see any information in the documentation. Can someone point me in the right direction please?

Update: This plugin has built-in next previous buttons that appear on either side of the lightbox. I want to add additional next/previous buttons within the lightbox with custom text (the name of the next or previous slide). To accomplish this I'm using a custom source:

<a data-fslightbox="partners" data-class="partner" href="#FirstPartner">
  <img src="FirstPartner.jpg" />
</a>
<a data-fslightbox="partners" data-class="partner" href="#SecondPartner">
  <img src="SecondPartner.jpg" />
</a>

<div class="display-none">
  <div id="FirstPartner">
    <div class="copy-container">
      Some copy
    </div>
    <div class="navigation-container">
      <button onclick="NextSlide()">
        Second Partner >>
      </button>
    </div>
  </div>
  <div id="SecondPartner">
     <div class="copy-container">
      Some copy
    </div>
    <div class="navigation-container">
      <button onclick="PrevSlide()">
        << First Partner
      </button>
    </div>
  </div>
</div>

Answer 1

Since the library does not seem to allow custom buttons there always exists is a css solution.

First we need to hide the svg arrows by setting display: none .

.fslightbox-slide-btn svg {
  display: none;
}

After that the content is being replaced by My text .

.fslightbox-slide-btn:after {
  content: 'My text';
  color: white;
}

This is what it looks like:

Live Demo