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