序列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');
.
.
.