CODEWITHSUNDEEP
javascriptjquerycssswiper.js
leemon
leemon

Reputation: 1061

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

Upvotes: 1

Views: 12289

Answers (2)

Shameem Ali
Shameem Ali

Reputation: 181

I make this option by using an lightbox (fancybox) and swiper. when user click on on thumbnail it will open a light box with selected item.

Declare variable with swiper and initialize after popup load.

 var mySwiper = new Swiper('.gallery-slider', {
            init: false,
            slidesPerView: 1,
            centeredSlides: true,
            loop: false,
            observer: true,
            observeParents: true,
            
        });

then after trigger pop using facnybox.

$('#product-images-slider .elem').click(function(e) {
            e.preventDefault();
             
            var thisTargetImage = $('#product-images-slider .elem.image').index(this);

             
            $.fancybox.open({
                src: "#productLightbox",
                type: 'inline',
                opts: {
                    toolbar: false,
                    defaultType: 'inline',
                    autoFocus: true,
                    touch: false,
                     
                    afterLoad: function() {

                        mySwiper.init();
                        

                        // target to index image slide
                        mySwiper.slideTo(thisTargetImage);
                        
                    },
                      
                }
            })
        });

HTMl for popup triger

 <div id="product-images-slider" class="prod-img-pic-wrap">
    <a class="elem fancybox-trigger image" data-type='image' href="..805fd8a03c0b67d44c8114c0087c030e-hi.jpg">
        <img src="..805fd8a03c0b67d44c8114c0087c030e-md.jpg" width="320">
    </a>
    </div>

Swiper popup with fancybox wrapper

 <div id="productLightbox" class="gallery">
   
           <div class="swiper-container gallery-slider">
                <div class="swiper-wrapper"></div>
                <div class="swiper-button-next swiper-button-black"></div>
                <div class="swiper-button-prev swiper-button-black"></div>
            </div>
    </div>

Upvotes: 0

leemon
leemon

Reputation: 1061

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',
    },
});

Upvotes: 1

Related Questions