将Prev/Next按钮添加到带有CSS和jQuery的滚动容器中

Question

经过长时间的研究，我找到了一个向DIV元素添加自定义滚动条的解决方案。它叫SimpleBar。文件可以在这里找到。

HTML结构和JS代码非常简单：

工作演示

<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>

通过data-simplebar，我可以向任何div添加自定义滚动条。

只有一件事我解决不了。我想在scroll元素中添加prev/next箭头。按钮应该跳转到DIV中的prev/next元素，该元素紧挨着DIV的左侧/右侧，并且还没有滚动（部分）。

并且JS应该适用于站点上的每个滑块实例。就像SimpleBar本身一样。每个滚动容器不需要额外的代码。

在jQuery中有什么我可以使用的东西吗？

编辑：我找到了这个答案和小提琴。我将代码添加到我的示例中，并将其更改为left/right。这并不完全是我所需要的，但我认为这可能是一个起点。不幸的是它不能正常工作。

Answer 1

您可以使用以下代码。请注意，滚动取决于视区，因此一旦没有更多的右宽度可转到，它将没有更多的空间移动。

null

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>