Methods

You can use lightGallery plugin instance public methods to trigger specific lightGallery actions. lightGallery provides several useful methods which can be used to customize the gallery or to build your own features. You can find the list of methods in the docs.

Let’s see how we integrate custom next and previous buttons instead of built-in buttons using lightGallery methods.

Demo

HTML Structure
<div id="gallery-methods-demo">
    <a href="img/img1.jpg">
        <img src="img/thumb1.jpg" />
    </a>
    <a href="img/img2.jpg">
        <img src="img/thumb2.jpg" />
    </a>
    ...
</div>
JavaScript
const $lgGalleryMethodsDemo = document.getElementById('gallery-methods-demo');
let methodsInstance;
$lgGalleryMethodsDemo.addEventListener('lgAfterOpen', () => {
    const previousBtn =
        '<button type="button" aria-label="Previous slide" class="lg-prev"> Prev Slide </button>';
    const nextBtn =
        '<button type="button" aria-label="Next slide" class="lg-next"> Next Slide </button>';

    // Append custom buttons to the lightGallery container
    const $lgContainer = document.querySelector('.lg');
    $lgContainer.insertAdjacentHTML('beforeend', nextBtn);
    $lgContainer.insertAdjacentHTML('beforeend', previousBtn);

    // use lightGallery goToNextSlide and goToPrevSlide methods to
    // navigate to respective slides
    document.querySelector('.lg-next').addEventListener('click', () => {
        methodsInstance.goToNextSlide();
    });
    document.querySelector('.lg-prev').addEventListener('click', () => {
        methodsInstance.goToPrevSlide();
    });
});

// Store the instance in a variable
methodsInstance = lightGallery($lgGalleryMethodsDemo, {
    // Add custom class for button styling
    addClass: 'lg-methods-demo',

    // Disable default controls
    controls: false,
});

Edit this page on GitHub