序列JS-隱藏和顯示序列滑塊

Question

Sequence JS是一個靈活的響應式滑塊，我正嘗試在我的網站中使用它。 當網站寬度低於閾值時，我想隱藏滑塊。 到目前為止，借助bootstrap響應實用程序類，我已經實現了這一點：

.
.
.
$(window).on('resize', function () {
    // .navbar-toggle appears when browser width is narrow
    if ($('.navbar-toggle').is(':visible')) {
        if (!$sequence.isPaused) {
            $sequence.pause();
            $("#slider").hide();
        }
    } else {
        if ($sequence.isPaused) {
            $("#slider").show();
            $sequence.unpause();
        }
    }
});
// Check if browser have the required width intially
$(window).trigger('resize');
.
.
.

乍一看，它看起來還可以，實際上它可以工作90％！ 但是有時在縮小瀏覽器寬度（隱藏滑塊）然后擴大瀏覽器寬度（顯示滑塊）之后，滑塊停止動畫處理並停滯在它被隱藏之前的最后一幀。

Answer 1

Sequence會監視其動畫元素以確定何時停止。 如果在動畫過程中隱藏Sequence，則它將不知道元素何時完成動畫設置，因此將停止。

我建議銷毀Sequence並啟動它來代替隱藏/顯示。

未經測試：

if ($('.navbar-toggle').is(':visible')) {
  $("#slider").destroy();
} else {
  $("#slider").sequence(options).data("sequence");
}

在Sequence.js下載中，您將找到一個名為example-functionality的目錄。 其中是您可能要參考的.destroy()演示。

Answer 2

擺弄后，我終於有了這個解決方案。 不用“暫停”，而是“停止”自動播放就可以了。 這里是：

.
.
.
$(window).on('resize', function () {
    // .navbar-toggle appears when browser width is narrow
    if ($('.navbar-toggle').is(':visible')) {
        if (!$sequence.isPaused) {
            $sequence.stopAutoPlay();
            $("#slider").hide();
        }
    } else {
        if ($sequence.isPaused) {
            $("#slider").show();
            $sequence.startAutoPlay(500); // Add a small delay here
        }
    }
});
// Check if browser have the required width intially
$(window).trigger('resize');
.
.
.