Swiper 观察到随机延迟

Question

我正在使用 Swiper (v6.5.1) 构建带有滑块功能的缩略图库。默认情况下，滑块是隐藏的，当用户单击其中一个图像时，必须显示滑块以显示单击的图像。滑块打开后，用户可以单击关闭按钮将其隐藏，然后 return 进入缩略图库。

这是我正在使用的代码：

JS:

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

document.querySelectorAll( '.gallery-thumbnails a[data-slide]' ).forEach( item => {
    item.addEventListener( 'click', function( e ) {
        e.preventDefault();
        window.scrollTo( 0, 0 );
        document.querySelector( '.gallery-thumbnails' ).style.display = 'none';
        document.querySelector( '.gallery-slider .swiper-container' ).style.display = 'block';
        var slideno = $( this ).data( 'slide' );
        swiper.slideTo( slideno + 1, false, false );
    });
});

document.querySelector( '.gallery-slider .close' ).addEventListener( 'click', function( e ) {
    e.preventDefault();
    document.querySelector( '.gallery-slider .swiper-container' ).style.display = 'none';
    document.querySelector( '.gallery-thumbnails' ).style.display = 'flex';
});

CSS:

.gallery-slider .swiper-container {
    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>

如您所见，代码使用了 Swiper 的观察者功能，每当其样式（如 hide/show）或其子元素（如 adding/removing 幻灯片）发生变化时，它都会重新初始化 Swiper .

第一次单击缩略图库中的图像时，一切正常。但是，如果我使用“关闭”按钮隐藏滑块，然后在新图像中单击以再次打开滑块，则滑块会出现但直到几秒钟后才会响应。奇怪的是这种延迟并不总是相同的。有时几乎是瞬时的，有时当滑块开始响应单击下一个和上一个按钮时已经超过 x 秒。我注意到的一件事是，如果我调整 window 的大小，滑块会立即响应。

我在最新的 Chrome 和 Firefox 中尝试了这段代码，结果相同。

这是预期的行为吗？观察者功能使用的 MutationObserver 是否不总是监听 DOM 中的变化？我是否以错误的方式初始化了 Swiper？

这是 Swiper 观察者的代码：

https://github.com/nolimits4web/swiper/blob/master/src/modules/observer/observer.js

Answer 1

我找到了奇怪延迟的罪魁祸首。我在 slideTo 函数中传递了一个布尔值作为第二个参数，而不是整数，这是它的正确类型。

您必须更改行：

swiper.slideTo( slideno + 1, false, false );

至：

swiper.slideTo( slideno + 1, 0, false );

Swiper 观察到随机延迟

Swiper observer random delay

javascript

slideshow

mutation-observers

swiper

swiperjs