添加 prev/next 按钮以使用 CSS 和 jQuery 滚动容器

Question

经过长时间的研究，我找到了将自定义滚动条添加到 DIV 元素的解决方案。它叫做简单栏。可以找到文档 here.

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。

只有一件事我无法解决。我想向滚动元素添加 prev/next 箭头。按钮应跳转到 DIV 中的 prev/next 元素，该元素位于 div 的 left/right 侧旁边并且尚未（部分）滚动。

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

jQuery有什么我可以用的吗？

编辑： 我找到了 this answer and fiddle。我将代码添加到示例中并将其更改为 left/right。这不完全是我需要的，但我认为它可以作为一个起点。不幸的是它不能正常工作。

Answer 1

您可以使用以下代码。请注意，滚动取决于视口，因此一旦没有更多合适的宽度可以移动，它就没有更多的移动空间。

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>

添加 prev/next 按钮以使用 CSS 和 jQuery 滚动容器

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

javascript

css

jquery

scrollbar

simplebar