SwiperJs demo

<div class="swiper">
  <div class="swiper-wrapper"  id="lg-swipper">
    <a
        data-lg-size="1600-1200"
        href="img/img1.jpg"
        class="swiper-slide"
    >
        <img src="img/thumb1.jpg" />
    </a>
    <a
        data-lg-size="1600-1200"
        href="img/img2.jpg"
        class="swiper-slide"
    >
        <img src="img/thumb2.jpg" />
    </a>
    ...
  </div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

let $lgSwiper = document.getElementById('lg-swipper');
const swiper = new Swiper('.swiper', {
    // other parameters
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },

    // Init lightGallery ince swiper is initilized
    on: {
        init: function () {
            const lg = lightGallery($lgSwiper);

            // Before closing lightGallery, make sure swiper slide
            // is aligned with the lightGallery active slide
            $lgSwiper.addEventListener('lgBeforeClose', () => {
                swiper.slideTo(lg.index, 0)
            });
        },
    }
});

.swiper-lg-wrap {
    width: 1200px;
    height: 0;
    padding-bottom: 65%;
    position: relative;
    max-width: 100%;
}
.swiper {
    width: 100%;
    height: 100%;
    position: absolute !important;
}