试图将功能彼此分离或隔离

一个简单的代码修复程序,确保绑定到正确的元素。

更改:

this.$sliderButtons = $('.arrow'); 到 this.$sliderButtons = $('.arrow',this);

$('.arrow.-prev').on('click', function(){ 到 $('.arrow.-prev',this).on('click', function(){

$('.arrow.-next').on('click', function(){ 到 $('.arrow.-next',this).on('click', function(){

您需要在惟一元素上绑定slider(可以使用属性名、id或惟一jQuery选择器完成)。把元素传进来就行了滑块初始化()如代码所示。因此,每当为该特定元素初始化slider时,它将位于父div范围内,并且只有该特定slider将移动。

/* http://meyerweb.com/eric/tools/css/reset/ 
 v2.0 | 20110126
 License: none (public domain)
*/<style>
   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; }

html, body {
  height: 100%; }

.wrapper {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  height: 100%;
  background-color: grey; }

.slides > .image {
  background-size: cover;
  background-repeat: no-repeat;
  height: 100%; }

.slider-items {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  left: 0;
  transition: left 0.5s linear; }
  .slider-items > .slides {
    height: 100%; }

.slider-banner {
  width: 100%;
  position: relative;
  background-color: beige;
  overflow: hidden; }
  .slider-banner .arrow {
    z-index: 10; }
  .slider-banner .arrow.-prev {
    position: absolute;
    top: 30%;
    left: 0; }
  .slider-banner .arrow.-next {
    position: absolute;
    top: 30%;
    right: 0; }
  .slider-banner > .slider-items {
    height: 50vh; }

.carousel-wrapper > .carousel-card {
  height: 100%;
  background-color: violet; }
  .carousel-wrapper > .carousel-card:nth-child(even) {
    background-color: saddlebrown; }

.carousel-region {
  background-color: aqua;
  overflow: hidden; }
  .carousel-region > .carousel-wrapper {
    position: relative;
    left: 0;
    height: 50vh;
    display: flex;
    flex-wrap: wrap;
    transition: left 0.5s linear; } </style>

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

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

    <div class="wrapper">

        <div id="div1" class="slider-banner">
            <a href="#" class="arrow -prev">prev</a>
            <a href="#" class="arrow -next">next</a>
            <div class="slider-items">

                <div class="slides">
                    <div class="image" > 

                    </div>
                </div>

                <div class="slides">
                    <div class="image" > 

                    </div>
                </div>

                <div class="slides">
                        <div class="image" > 

                        </div>
                </div>
            </div>

            <div class="banner-detail">
                <h2 class="preamble-heading" data-preamble="Test Preamble">Sample Page</h2>
            </div>
        </div>

        <div id ="div2" class="slider-banner">
            <a href="#" class="arrow -prev">prev</a>
            <a href="#" class="arrow -next">next</a>
            <div class="slider-items">


                <div class="slides">
                    <div class="image" > 

                    </div>
                </div>

                <div class="slides">
                    <div class="image"> 

                    </div>
                </div>


                <div class="slides">
                        <div class="image" > 

                        </div>
                </div>
            </div>

            <div class="banner-detail">
                <h2 class="preamble-heading" data-preamble="Test Preamble">Sample Page</h2>
            </div>
        </div>
        <script>
        (function ($) {
    'use strict';

    var Slider = {

        init : function(elementArr) {

            this.$sliderBanner = $('.slider-banner');


            $(elementArr).each(function(index, value) {
                var position = 0;
                var $sliderItemsWrapper = $(value+'.slider-items');
                $sliderItemsWrapper.$slides = $(value+'.slides');
                $sliderItemsWrapper.$sliderButtons = $(value+'.arrow');
                $sliderItemsWrapper.totalSlides = $(value+'.slides').length;

                $sliderItemsWrapper.sliderBannerWidth = $($sliderItemsWrapper).width();
                $sliderItemsWrapper.$setSliderWrapperWidth = $($sliderItemsWrapper).width( $sliderItemsWrapper.sliderBannerWidth * $sliderItemsWrapper.totalSlides );

                $sliderItemsWrapper.$slides.width($sliderItemsWrapper.sliderBannerWidth);
                var that = $sliderItemsWrapper;

                $(value+' .arrow.-prev').on('click', function(){
                    position --;
                    if ( position == -1 ) { position = that.totalSlides - 1; }
                    that.css('left', - (that.sliderBannerWidth * position));  
                    console.log(position);
                });

                $(value+' .arrow.-next').on('click', function() {
                    position ++;
                    if (position == that.totalSlides) { position = 0; }
                   that.css('left', - (that.sliderBannerWidth * position));  
                    console.log(position);
                });                
            });
        },
    };



    $(document).ready(function() {

        Slider.init(["#div1","#div2"]);
    });

})(jQuery);
        </script>
    </div>