Providing an Arrows prop causes arrows to not render.

Hi there, first of all, thanks for this awesome integration!

I think I’ve found an issue with the arrows prop, when supplying the prop, the arrows won’t render. This is especially problematic when working with different gliders on the same page, since they all need distinct arrow selectors.

I think this is the line that’s causing arrows to not render:

https://github.com/hipstersmoothie/react-glider/blob/4cb01307c4422eb55a9ed2dea0ea5d18aa6934c1/src/index.tsx#L286

As a workaround I’m running a useLayoutEffect and adding the arrows manually:

// your arrow selector / elements here

 React.useLayoutEffect(() => {
    if (gliderRef.current && arrows) {
      const { prev: prevArrow, next: nextArrow } = arrows
      const container = gliderRef.current.ele.parentElement
      if (container) {
        container.insertBefore(prevArrow, gliderRef.current.ele)
        container.appendChild(nextArrow)
      }
    }
  }, [arrows])

Let me know if this is expected behaviour or actually a bug. If so, I can attempt a PR that also takes care of #36

[kevinfarrugia]

@yashvesikar I was unable to replicate the issue, but I have updated Storybook to include a demo includes a slider which uses the arrows prop. This was done in #67 .

Demo: https://hipstersmoothie.github.io/react-glider/?path=/story/glider--multiple-gliders

[yashvesikar]

Hi @Gamaranto / @pszalko . Thank you for your input.

I have created a pull request to demo multiple sliders and also uses custom arrow elements (string/selectors) instead of the default implementation. The default arrows are removed and the slide may be transitioned using the custom elements. Let me know if this addresses your concern.

We can tackle support for an Element as mentioned in #36 separately.

Hi @kevinfarrugia where can I find the PR that you made for this issue? was this ever merged in? Thanks!