单击图库中的缩略图时显示 Swiper 滑块

Question

我正在使用 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>

使用此代码，当用户单击缩略图时会显示滑块，但滑块本身不起作用。下一个和上一个按钮不做任何事情。滑块隐藏时没有初始化吗？

我做错了什么？任何帮助将不胜感激。

谢谢

Answer 1

显然，您需要在初始化 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',
    },
});

Answer 2

我通过使用灯箱（fancybox）和滑动器来选择此选项。当用户点击缩略图时，它将打开一个带有所选项目的灯箱。

使用 swiper 声明变量并在弹出加载后初始化。

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

然后在使用 facnybox 触发 pop 之后。

$('#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

 <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>

带有fancybox包装器的滑动弹出窗口

 <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>