Add prev/next buttons to scroll container with CSS and jQuery

After a long research I found a solution to add a custom scrollbar to a DIV element.
It’s called SimpleBar. Docs can be found here.

The HTML structure and JS code is pretty simple:

Working demo

<div class="gallery" data-simplebar data-simplebar-auto-hide="false">
    <div class="item"><img src="https://via.placeholder.com/250x150/0000FF" /></div>
    <div class="item"><img src="https://via.placeholder.com/350x150/FF0000" /></div>
    [...]
</div>

With data-simplebar I can add a custom scrollbar to any DIV.

There is just one thing I couldn’t solve.
I want to add prev/next arrows to the scroll element.
The buttons should jump to the prev/next element in the DIV which is next to the left/right side of the div and not yet scrolled (partially) over.

And the JS should work for every slider instance on the site. Like the SimpleBar itself. There is no need for extra code per scroll container.

Is there anything I could use in jQuery?

EDIT: I found this answer and fiddle. I added the code to my example and changed it to left/right. It’s not exactly what I need but I thought it could be a starting point. Unfortunately it doesn’t work properly.

52 thoughts on “Add prev/next buttons to scroll container with CSS and jQuery”