Slick: 1.5.0 event listening prevents nested sliders

[nfour]

I've multiple nested sliders.

Markup

<div class="sliderParent">
  <div class='slide'>
    <div class="sliderChild"><div class="slide"></div></div>
  </div>
</div>

$('.sliderParent').on 'beforeChange', (event, slick, currentIndex, index) =>
  # Called twice when .sliderChild is changed (thus with sliderChild's index)

So this is a bit awkward. I tried adding jquery listener scopes such as .on('beforeChange.Test1') but that didn't seem to fix it either. Sliderchild is even being .slick()ed first.

My workaround is to check instances on each event...

$('.sliderParent').on 'beforeChange', (event, slick, currentIndex, index) =>
  if not slick.$slider.is @slick.$slider
    return event.preventDefault()

[adam-lynch]

I think this is all expected behaviour as it's how events are meant to work, if I understand your problem correctly. What I think you need is:

$('.sliderParent').on 'beforeChange', (event, slick, currentIndex, index) =>
    # do whatever with parent slider

$('.sliderChild').on 'beforeChange', (event, slick, currentIndex, index) =>
    event.stopPropagation() # prevent the event from bubbling up to parent
    # do whatever with child slider