How to remove previous and next button?

[TobiasKrais]

I want to remove the previous and next button completely. Not only disable it, but completely remove it. How can I do this?

[gingerchew]

You could use the custom HTML feature, but you're probably better off using display: none and adding a rule to your css. It's much easier and will hide them from any AT

[TobiasKrais]

I thought about the CSS solution, but it removes the buttons completely. I would like to be able to switch it on and off each time I initialize glightbox.

Thus custom HTML seems to be the solution (copied from documentation https://github.com/biati-digital/glightbox?tab=readme-ov-file#themeable). Here my code:

const customLightboxHTML = `<div id="glightbox-body" class="glightbox-container">
    <div class="gloader visible"></div>
    <div class="goverlay"></div>
    <div class="gcontainer">
    <div id="glightbox-slider" class="gslider"></div>
    <button class="gclose gbtn" tabindex="0" aria-label="Close">{closeSVG}</button>
</div>
</div>`;

const glightbox = GLightbox({
  lightboxHTML: customLightboxHTML,
});

Using this code leads to Uncaught TypeError: e is null error in JavaScript console and close button works no more. Adding the 2 button lines removes the error.

[gingerchew]

Okay, so you don't want to remove them completely, you want to be able to control when they show?

I'm confused because you first said:

I want to remove the previous and next button completely.

But now the solution that removes them completely doesn't work, because there is some condition?

Without a codepen or something similar I can't help debug errors.

[TobiasKrais]

Here's a demo site: https://test.design-to-use.de/glightbox/ showing 2 issues:

1. The close button works no more.
2. Klicking next or previous works even though the buttons are not available.