您可以使用类似这样的方法：

$('.slider-wrapper').each(function() {
    var sliderWrapper      = $(this),
        sliderWrapperWidth = sliderWrapper.width(),
        slider             = sliderWrapper.find('.slider'),
        slideItems         = sliderWrapper.find('.slider .slide-items'),
        position           = 0;

    //itemLengths.push(slideItems.length); 
    slideItems.outerWidth( sliderWrapperWidth / 2 );


    slider.width( slideItems.outerWidth() * slideItems.length  );

    sliderWrapper.find('.buttons .prev').on('click', function(e) {
        ...
    });

    sliderWrapper.find('.buttons .next').on('click', function(e) {
        ...
    });
});

这样滑块的每个实例都会有自己的变量和事件。

我在每个点击事件中使用了 $(this) 来存储与当前点击元素相关的变量。我还为每个滑块添加了一个 data-slide 属性，以替换 position 变量，这样每个滑块都有自己的滑块位置定义。

我也清理了一点代码，因为我很无聊。

$(document).ready(function() {

  $('.prev').on('click', function(e) {
      event.stopPropagation();
      // store variable relevent to clicked slider
      var sliderWrapper      = $(this).closest('.slider-wrapper'),
    	    slideItems         = sliderWrapper.find('.slide-items'),
          slider             = sliderWrapper.find('.slider'),
          currentSlide       = sliderWrapper.attr('data-slide');

      // Check if data-slide attribute is greater than 0
      if( currentSlide > 0 ) {
          // Decremement current slide
          currentSlide--;
          // Assign CSS position to clicked slider
          slider.css({'right' : currentSlide*slideItems.outerWidth() });
          // Update data-slide attribute
          sliderWrapper.attr('data-slide', currentSlide);
      }
  });

  $('.next').on('click', function(e) {
      event.stopPropagation();
      // store variable relevent to clicked slider
      var sliderWrapper      = $(this).closest('.slider-wrapper'),
    	    slideItems         = sliderWrapper.find('.slide-items'),
          slider             = sliderWrapper.find('.slider'),
          totalSlides        = slideItems.length,
          currentSlide       = sliderWrapper.attr('data-slide');

    // Check if dataslide is less than the total slides
    if( currentSlide < totalSlides - 1 ) {
        // Increment current slide
        currentSlide++;
        // Assign CSS position to clicked slider
        slider.css({'right' : currentSlide*slideItems.outerWidth() });
        // Update data-slide attribute
        sliderWrapper.attr('data-slide', currentSlide);
    }
  })

});

$(window).on('load', function() {

  $('.slider-wrapper').each(function() {
    var slideItems = $(this).find('.slide-items'),
    items = slideItems.length,
    sliderBox = $(this).find('.slider'),
    sliderWrapperWidth = $(this).width();

    slideItems.outerWidth( sliderWrapperWidth / 2 );
    sliderBox.width( slideItems.outerWidth() * items  );
  });

});

/* http://meyerweb.com/eric/tools/css/reset/
 v2.0 | 20110126
 License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block; }

body {
line-height: 1; }

ol, ul {
list-style: none; }

blockquote, q {
quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none; }

table {
border-collapse: collapse;
border-spacing: 0; }

* {
box-sizing: border-box; }

.container {
  max-width: 1280px;
  margin: 0 auto;
}

.container .slider-wrapper {
  margin-bottom: 40px;
  background-color: grey;
  overflow: hidden;
}

.container .slider-wrapper .slider {
  position: relative;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
}

.container .slider-wrapper .slider > div {
  padding: 10px;
  background-color: #e5d0d0;
}

.container .slider-wrapper .slider > div p {
  color: purple;
}

.container .slider-wrapper .buttons {
  display: flex;
  justify-content: space-between;
  background: beige;
  padding: 10px 0;
}


.container .slider-wrapper .buttons div {
  background-color: cyan;
}

<div class="container">
  <div class="slider-wrapper" data-slide="0">
    <div class="slider">
        <div class="slide-items">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
        </div>

        <div class="slide-items">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget ex mi. Etiam a vestibulum ligula, id porta dui. Duis in iaculis quam. Integer aliquam justo nec nibh consequat vulputate.</p>
        </div>

        <div class="slide-items">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
        </div>
    </div>
    <div class="buttons">
        <div class="prev">prev</div>
        <div class="next">next</div>
    </div>
  </div>
  <div class="slider-wrapper" data-slide="0">
    <div class="slider">
        <div class="slide-items">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
        </div>
    </div>
    <div class="buttons">
        <div class="prev">prev</div>
        <div class="next">next</div>
    </div>
  </div>

  <div class="slider-wrapper" data-slide="0">
    <div class="slider">
        <div class="slide-items">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
        </div>
        <div class="slide-items">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget ex mi. Etiam a vestibulum ligula, id porta dui. Duis in iaculis quam. Integer aliquam justo nec nibh consequat vulputate.</p>
        </div>
    </div>
    <div class="buttons">
        <div class="prev">prev</div>
        <div class="next">next</div>
    </div>
  </div>
  <div class="slider-wrapper" data-slide="0">
    <div class="slider">
        <div class="slide-items">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
        </div>
    </div>
    <div class="buttons">
        <div class="prev">prev</div>
        <div class="next">next</div>
    </div>
  </div>
  <div class="slider-wrapper" data-slide="0">
    <div class="slider">
        <div class="slide-items">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
        </div>

        <div class="slide-items">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
        </div>
    </div>
    <div class="buttons">
        <div class="prev">prev</div>
        <div class="next">next</div>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

您的问题在于选择器的使用。简而言之，事件函数内的选择器会同时命中两个滑块。但答案并不像使用 $(this) 那么简单。下面是更长的答案：

jquery 的强大之处在于它使添加元素事件监听器变得非常简单。让我们分解一段代码来了解发生了什么：

$('.slider-wrapper .slider .buttons .prev').on('click', function(e) {
    event.stopPropagation();
    if( position > 0 ) {
        position--;
        $('.slider-wrapper .slider').css({'right' : position*slideItems.width() });
    }
});

行 $('.slider-wrapper .slider .buttons .prev') 是一个元素 选择器 ，它表示 查找具有类层次结构 'slider-wrapper slider buttons prev' 的所有元素。请注意 ALL - 这是您的代码出错的地方 - 我们稍后会修复它。该行的结尾是 .on('click', function(e) {{ }}，意思是 对于您找到的每个元素，监听点击事件并在听到点击事件时触发以下函数 。

所以 - 总结一下，找到所有匹配的元素并在点击事件上触发一个函数。到目前为止一切顺利，但是在点击事件中会发生什么，它具体是如何知道哪个匹配元素是函数内的上下文的。或者在你的情况下，当我们只想影响与按钮相关的滑块时，我们如何阻止它影响两个滑块？

这是你问题的核心。看看你的事件函数中的这一行：

$('.slider-wrapper .slider').css({'right' : position*slideItems.width() });

这一行使用一个选择器 $('.slider-wrapper .slider') ，它表示“找到具有这种样式层次结构的所有元素”。我想现在你可能会恍然大悟。当你有一个滑块时只有一个匹配元素，但页面上有两个滑块，因此有两个元素与此选择器匹配。结果就是您所遇到的情况 - 单击一个按钮，两个滑块都会受到影响。

解决方案是修改此选择器以仅影响与按钮位于同一滑块中的元素，为此，我们需要引用获得点击的按钮的上下文。查看 HTML，从按钮开始，我们需要转到带有 class='slider-wrapper' 的元素，然后找到带有 class='slider' 的子元素。选择器需要为：

$(this).parents('.slider-wrapper').find('.slider').css({'right' : position*slideItems.width() });

这里有一些 jquery 魔法需要解释。 $(this) 在事件函数中使用，并引用触发事件的元素。您使用 class='prev' 在元素上连接了选择器，因此当我们使用 $(this) 时，这就是我们要选择的起始元素。

.parents() 是一个从给定的起始元素向上遍历元素祖先树的选择器。由于 jquery 链接（选择器之间的点），我们可以一个接一个地链接选择器，因此我们可以通过这种方式链接选择器来遍历 DOM。添加 .parents('.slider-wrapper') 表示查找具有 class='slider-wrapper' 的父元素。

继续该过程， .find('.slider') 使用 find 选择器从给定元素的 DOM 树中查找任何具有 class='slider' 的子元素。

所有这些的结果是，当您单击滑块 1 中的按钮时，所描述的选择器仅影响滑块 1。滑块 2 也是如此。

请注意，这里的模式是进行广泛的外部选择以将事件侦听器应用于多个元素，然后在函数中使用 $(this) 正是 jquery 发明者的意图。稍微使用祖先和子选择器，您就拥有了在复杂 DOM 结构中轻松实现导航和定位的强大手段。

背景阅读：jquery $(this) 、 parents() 、 .find()

注意：我修复了示例代码中与缺少变量 totalSliders 相关的问题。我使用了上面描述的相同技术来计算单击按钮所属的滑块的数量。

var totalSlides = $(this).parents('.slider-wrapper').find('.slide-items').length;

我稍微修改了您的 HTML，因为我们不需要 5 个滑块来说明解决方案。

$(window).on('load', function() {


	var sliderWrapper      = $('.slider-wrapper'),
	    sliderWrapperWidth = sliderWrapper.width(),
	    slider             = $('.slider'),
	    slideItems         = $('.slider .slide-items'),
	    position           = 0;

	$('.slider-wrapper .slider').each(function() {
		var items = $(this).find('.slide-items').length;
		var sliderBox = $(this);

		slideItems.outerWidth( sliderWrapperWidth / 2 );

		sliderBox.width( slideItems.outerWidth() * items  )
    });


    $('.slider-wrapper .buttons .prev').on('click', function(e) {
        event.stopPropagation();
        if( position > 0 ) {
            position--;
            $(this).parents('.slider-wrapper').find('.slider').css({'right' : position*slideItems.width() });
        }
    });

    $('.slider-wrapper .buttons .next').on('click', function(e) {
        event.stopPropagation();
        console.log('next');
        // fix - get the number of sections in THIS slider.
        var totalSlides = $(this).parents('.slider-wrapper').find('.slide-items').length;
        if( position < totalSlides - 1 ) {
	        position++;
	        $(this).parents('.slider-wrapper').find('.slider').css({'right' : position*slideItems.width()         });
	    }
    })

})

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

* {
  box-sizing: border-box; }

.container {
  max-width: 1280px;
  margin: 0 auto; 
}

.container .slider-wrapper {
  margin-bottom: 40px;
  background-color: grey;
  overflow: hidden; 
}

.container .slider-wrapper .slider {
  position: relative;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden; 
}

.container .slider-wrapper .slider > div {
  padding: 10px;
  background-color: #e5d0d0; 
}

.container .slider-wrapper .slider > div p {
  color: purple; 
}

.container .slider-wrapper .buttons {
  display: flex;
  justify-content: space-between;
  background: beige;
  padding: 10px 0; 
}


.container .slider-wrapper .buttons div {
  background-color: cyan; 
}

/*# sourceMappingURL=style.css.map */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">

    <div class="slider-wrapper">
        <div class="slider">
            <div class="slide-items">
                <p>1-1  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
            </div>

            <div class="slide-items">
                <p>1-2  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
            </div>

            <div class="slide-items">
                <p>1-3  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
            </div>

        </div>

        <div class="buttons">
            <div class="prev">
                prev
            </div>

            <div class="next">
                next
            </div>
        </div>
    </div>


    <div class="slider-wrapper">
        <div class="slider">
            <div class="slide-items">
                <p>2-1  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
            </div>
            <div class="slide-items">
                <p>2-2  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
            </div>

            <div class="slide-items">
                <p>2-3  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
            </div>


        </div>

        <div class="buttons">
            <div class="prev">
                prev
            </div>

            <div class="next">
                next
            </div>
        </div>
    </div>


</div>