I am in the process of creating a thumbnail gallery that includes a slider feature using Swiper. The default setup has the slider hidden, and once an image is clicked, the slider should appear with the selected image. To close the slider and return to the thumbnail gallery, users can click on a Close button.
Below is the code I have implemented:
Javascript:
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>
Although the slider appears when a thumbnail is clicked, it seems the functionality of the next and previous buttons within the slider is not working. Is it possible that the slider needs to be initialized when visible?
If you have any suggestions or insights on what might be incorrect, I would greatly appreciate your help
Thank you