如何解决单击图库中的缩略图时显示 Swiper 滑块？
开发过程中遇到单击图库中的缩略图时显示 Swiper 滑块的问题如何解决？下面主要结合日常开发的经验，给出你关于单击图库中的缩略图时显示 Swiper 滑块的解决方法建议，希望对你解决单击图库中的缩略图时显示 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',});
