Custom Controls not working correctly

[alex4brandung]

Describe the bug
Custom controls not working correctly. When I load the app and use the controls in infinite mode, after pressing the next button when sitting on the last item, it will go back to the first instead of looping through. But if I use the slide for once (for example slide right) I can loop through using next, but if I use back it will go right as long as it reaches the item. So going back is completely broken. Same with sliding left once and using the next button afterwards. It will then go back through all items! The controls you provide are working as intended!

To Reproduce
Steps to reproduce the behavior:

1. Go To the example sandbox
2. include the following code

<div>
        <button
          onClick={() => setActiveSlide(activeSlide > 0 ? activeSlide - 1 : 9)}
        >
          last
        </button>

        <button
          onClick={() => setActiveSlide(activeSlide < 9 ? activeSlide + 1 : 0)}
        >
          next
        </button>
      </div>

Expected behavior
Working as expected in both ways! Looping through correctly.

[vadymshymko]

@alex4brandung Hello. The case you described is not a bug. The point is that the component cannot control the logic of the onclick handler for the button rendered outside the component.

Alternatively, you can use the following props to customize the navigation buttons: forwardBtnProps && backwardBtnProps

[alex4brandung]

ok I understand... but as I see it right now I cannot really have the buttons and the dots on the same row, like on the screenshot below: