Sequence JS - Hide and show the sequence slider

Question

Sequence JS is a flexible responsive slider which I am trying to use in my website. I want to hide the slider when website width is below a threshold. With help of bootstrap responsive utility class, I have achieved this so far:

.
.
.
$(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');
.
.
.

At first glance it looks OK and in fact it works 90% of time! But sometimes after narrowing browser width (which hides slider) and then expanding browser width (which shows slider), the slider stops animating and stalls at the last frame it had before became hidden.

Answer 1

Sequence watches its animated elements to determine when they have stopped. If you hide Sequence during an animation, it won't know when elements have finished animating, hence the stalling.

I'd recommend destroying Sequence and initiating it in place of hiding/showing.

Untested:

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

In the Sequence.js download, you'll find a directory named example-functionality. Within that is a demo for .destroy() which you might like to reference.

Answer 2

After fiddling around, I finally came with this solution. Instead of "Pausing", "Stopping" the autoPlay would do the trick. Here it is:

.
.
.
$(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');
.
.
.