Multiple slides animation

[curdin]

I've got a setup with multiple sliders on a page all using a slide animation. The issue is that only one actually animates as the other ones seem to get their classes stripped (they still advance but without animation)
It seems the issue happens due to the addClass code in WS.goto() or possibly the removeAllHelperSettings.

Do you have any insights on what is happening there?

[peduarte]

Hey, that's interesting, I will look into it and get back to you.
Thanks

[peduarte]

I cannot seem to replicate your issue.
I've created this Pen to test it out: http://codepen.io/peduarte/pen/gaoEXz

Can you show me how you're getting this problem?

[peduarte]

Closing as I am unable to replicate your issue, feel free to re open or ask any questions.

[curdin]

@peduarte Apologies - i was away from a computer for a couple of days. I've updated the codepen to demostrate the issue. If you click the Advance both button you'll see that the left one fails to use a transition.
http://codepen.io/anon/pen/xwYLNJ

[curdin]

(I seem to be unable to reopen this issue)

[peduarte]

Wow, amazing find!
Will look into it

[afmarchetti]

Hi guys Did you solve the issue? I have to slider with autoplay and the animations doesn't work properly

[xaddict]

I found this issue too when using the autoplay example but changing it to autoplay 2 sliders. The classes 'hideprevious' and 'shownext' get added to only 1 of the sliders, not all.

[peduarte]

Hey guys, so sorry for the delay on this. I promise I'll look into it as soon as I can. 🙏

[benjaminpkane-zz]

Here

  // Reset all settings by removing classes and attributes added by goTo() & updateButtonStates()
  WS.removeAllHelperSettings = function () {
    removeClass(this.allItemsArray[this.currentItemIndex], this.options.currentItemClass);
    removeClass($$(this.options.hidePreviousClass)[0], this.options.hidePreviousClass);
    removeClass($$(this.options.hideNextClass)[0], this.options.hideNextClass);
    removeClass($$(this.options.showPreviousClass)[0], this.options.showPreviousClass);
    removeClass($$(this.options.showNextClass)[0], this.options.showNextClass);

    if (!this.buttonPrevious && !this.buttonNext) { return; }

    this.buttonPrevious.removeAttribute('disabled');
    this.buttonNext.removeAttribute('disabled');
  };

and here

  // Helper functions
  function $$(element) {
    if (!element) { return; }
    return document.querySelectorAll('.' + element);
  }

$$ is taking element, but it's just a string of a css class. The if statement in $$ is pointless.

document.querySelectorAll is querying the entire DOM. Also, it will always return an array, empty or not. 0 indexing an empty array returns null.

removeAllHelperSettings is basically just going to town on any DOM element with those classes.

[Djules]

I've extended the $$ helper function in order to query within a given container instead of the entire DOM, and fixed the OP issue as well.