I am working on a small "Picture browser" application in Bootstrap 4 and JavaScript.

As can be seen in THIS jsFiddle, there is a "Prev" and a "Next" button that help navigate through the pictures.

I have bean trying to find a reliable method to make mouse well scrolling function the same as these buttons. Scrolling down would be the equivalent of clicking the "Next" button. Scrolling up would be the equivalent of clicking the "Prev" button.

Firing the  showSlide()   function on mouse wheel does work, but the transition is too...   continuous . I wish it would be identical to the transition triggered by the buttons.

I would also need to detect and use the  mouse well  scroll direction.

What am I missing? What shall I do?