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

Question

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.

question from:https://stackoverflow.com/questions/65833297/add-prev-next-buttons-to-scroll-container-with-css-and-jquery

Answer 1

You can use the following code. Note that the scrolling depends on the viewport, so that once there's no more right width to go to, it won't have more room to move.

const DIRECTION = { PREV: 1, NEXT: 2 };
$(document).ready(function () {
   $('.container').each(function (index, containerItem) {
      var $gallery = $(containerItem).find('.gallery');
      const simpleBar = new SimpleBar($gallery[0], { 
        autoHide: false, 
        scrollbarMaxSize: 50 
     });
     var $scroller = $(simpleBar.getScrollElement());
     $(containerItem).find('.scrollLeft').on('click', function () {
        scroll(DIRECTION.PREV, $scroller);
        event.preventDefault(); // prevents anchor jump on click
     });
     $(containerItem).find('.scrollRight').on('click', function () {
        scroll(DIRECTION.NEXT, $scroller);
        event.preventDefault();
     });
     $scroller.scroll(function () {
        setButtonsVisibility($scroller);
     });
   });
});

function scroll(direction, $scroller) {
  var $active = $scroller.find('.active');
  var $target = direction == DIRECTION.PREV ? $active.prev() : $active.next();
  if ($target.length) {
    $scroller.animate({
      scrollLeft: $target[0].offsetLeft
    }, 2000);
    $active.removeClass('active');
    $target.addClass('active');
  }
}
function setButtonsVisibility($scroller) {
    var scrollLeft = $scroller.scrollLeft();
    isScrollerStart($scroller,  scrollLeft);
    isScrollerEnd($scroller,  scrollLeft);
}
function isScrollerStart($scroller, scrollLeft, $button) {
  var $prevButton = $scroller.closest('.container').find('.scrollLeft');
  if (scrollLeft == 0) {
    $prevButton.css('visibility', 'hidden');
  } else {
    $prevButton.css('visibility', 'visible');
  }
}
function isScrollerEnd($scroller, scrollLeft) {
  var $nextButton = $scroller.closest('.container').find('.scrollRight');
  var scrollWidth = $scroller[0].scrollWidth; // entire width
  var scrollerWidth = $scroller.outerWidth()  // visible width
  if (scrollLeft >= scrollWidth - scrollerWidth) {
    $nextButton.css('visibility', 'hidden');
  } else {
    $nextButton.css('visibility', 'visible');
  }
}

.container {margin: 0 auto 2rem; max-width: 960px;}
.gallery {padding-bottom: 2rem; margin-bottom: 2rem;}
.gallery .simplebar-content {display: flex;}
.gallery .item {margin-right: 1rem;}
.simplebar-scrollbar:before {background: red !important;} 
.simplebar-track.simplebar-horizontal {background: #eee !important;;}
.buttons {display: flex; justify-content: space-between; width: 100%; margin-bottom: 2rem;}
.buttons a {padding: 0.5rem; background: #ddd; text-decoration: none; color: #000;}
.scrollLeft { visibility: hidden; }

<script src="https://unpkg.com/simplebar@latest/dist/simplebar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/simplebar@latest/dist/simplebar.css">

<div class="container">
   <h2>Slider</h2>
   <div class="gallery">
      <div class="item active"><img src="https://via.placeholder.com/150x30/110000" /></div>
      <div class="item"><img src="https://via.placeholder.com/450x30/3300FF" /></div>
      <div class="item"><img src="https://via.placeholder.com/350x30/992244" /></div>
      <div class="item"><img src="https://via.placeholder.com/400x30/0000FF" /></div>
   </div>
   <div class="buttons">
      <a class="scrollLeft" href="#"><strong>Prev</strong> (remove if first)</a>
      <a class="scrollRight" href="#"><strong>Next</strong> (remove if last)</a>
   </div>
</div>

<div class="container">
   <h2>Slider</h2>
   <div class="gallery">
      <div class="item active"><img src="https://via.placeholder.com/150x30/110000" /></div>
      <div class="item"><img src="https://via.placeholder.com/450x30/3300FF" /></div>
      <div class="item"><img src="https://via.placeholder.com/350x30/992244" /></div>
      <div class="item"><img src="https://via.placeholder.com/400x30/0000FF" /></div>
   </div>
   <div class="buttons">
      <a class="scrollLeft" href="#"><strong>Prev</strong> (remove if first)</a>
      <a class="scrollRight" href="#"><strong>Next</strong> (remove if last)</a>
   </div>
</div>