Question

I have several sliders on the same page and but don’t show all at once. I would like to be able to stop a slider and remove the animation by an event function. As it works right now, if I hide a slider, it still runs in the background, the dom shows the images rotating and the url parameters change.

I’ve seen this question, but it did not work for me: How to stop AnythingSlider when Flowplayer clicked

This is also somewhat similar, but I want to remove the slider instead of restarting: AnythingSlider: how to restart slideshow

function stopAnythingSlider() {
  // I receive `TypeError: $(".anythingSlider").data("AnythingSlider") is undefined`
  // $('.anythingSlider').data('AnythingSlider').startStop(false);
}

*Edit:
I used the id of my list instead of .anythingSlider and that seems to be working,

 $('#idOfList').data('AnythingSlider').startStop(false);

Answer 1

I have to specify the id of the list I want to stop

function stopAnythingSlider() {
   $('#idOfList').data('AnythingSlider').startStop(false);
}

If I want to stop multiple lists with the same class:

function stopAnythingSliderMultiple() {
  $('.anythingSlider ul.hideTheseOnly').each(function() {
    $(this).data('AnythingSlider').startStop(false);
  });
}