如何解决单击图库中的缩略图时显示 Swiper 滑块
我正在使用 Swiper 构建一个带有滑块功能的缩略图库。默认情况下,滑块是隐藏的,当用户单击其中一张图像时,滑块必须显示为显示单击的图像。滑块打开后,用户可以单击关闭按钮将其隐藏并返回缩略图库。
这是我正在使用的代码:
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>
使用此代码,当用户单击缩略图时会显示滑块,但滑块本身不起作用。 next 和 prev 按钮不执行任何操作。隐藏时滑块未初始化?
我做错了什么?任何帮助将不胜感激。
谢谢
解决方法
显然,您需要在初始化 Swiper 时添加 observer
和 observeParents
参数,以便每次更改滑块样式(如隐藏/显示)或修改其子元素时都会更新(重新初始化)滑块(如添加/删除幻灯片)或其父元素。
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',});