Display a Swiper slider when clicking a thumbnail in a gallery

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

Answer

Apparently, you need to add the observer and observeParents parameters when initializing Swiper so the slider is updated (reinitialized) each time you change its style (like hide/show) or modify its child elements (like adding/removing slides) or its parent element.

var swiper;

swiper = new Swiper( '.gallery-slider .swiper-container', {
    loop: true,
    observer: true,
    observeParents: true,
    autoplay: {
        delay: 3000,
        disableOnInteraction: false,
    },
    navigation: {
        nextEl: '.swiper-next',
        prevEl: '.swiper-prev',
    },
});

Advertisement

Answer