I'm building a thumbnail gallery with a slider feature using Swiper. By default, the slider is hidden, and when the user clicks one of the images, the slider must be displayed showing the clicked image. Once the slider is open, the user can click a Close button to hide it and return to the thumbnail gallery.

This is the code I'm using:

JS:

var swiper;



swiper = new Swiper( '.gallery-slider .swiper-container', {

    loop: true,

    autoplay: {

        delay: 3000,

        disableOnInteraction: false,

    },

    navigation: {

        nextEl: '.swiper-next',

        prevEl: '.swiper-prev',

    },

});



$( '.gallery-thumbnails a[data-slide]' ).on( 'click', function( e ) {

    e.preventDefault();

    $( '.gallery-thumbnails' ).hide();

    $( '.gallery-slider' ).show();

    var slideno = $( this ).data( 'slide' );

    swiper.slideTo( slideno + 1, false, false );

});



$( '.gallery-slider .close' ).on( 'click', function( e ) {

    e.preventDefault();

    $( '.gallery-slider' ).hide();

    $( '.gallery-thumbnails' ).show();

});

CSS:

.gallery-slider {

    display: none;

}

HTML:

<div class="gallery-thumbnails">

    <div class="gallery-image"><a href="" data-slide="0"><img src="thumb0.jpg" /></a></div>

    <div class="gallery-image"><a href="" data-slide="1"><img src="thumb1.jpg" /></a></div>

    <div class="gallery-image"><a href="" data-slide="2"><img src="thumb2.jpg" /></a></div>

    <div class="gallery-image"><a href="" data-slide="3"><img src="thumb3.jpg" /></a></div>

    ....

</div>



<div class="gallery-slider">

    <div class="swiper-container">

        <div class="swiper-prev">previous</div>

        <div class="swiper-next">next</div>

        <div class="close">close</div>

        <div class="swiper-wrapper">

            <div class="swiper-slide"><img src="slide0.jpg" /></div>

            <div class="swiper-slide"><img src="slide1.jpg" /></div>

            <div class="swiper-slide"><img src="slide2.jpg" /></div>

            <div class="swiper-slide"><img src="slide3.jpg" /></div>

            ....

        </div>

    </div>

</div>

Using this code, the slider is shown when a user clicks a thumbnail, but the slider itself doesn't work. The next and prev buttons don't do anything. Is the slider not initialized when hidden?

What am I doing wrong? Any help would be appreciated.

Thanks