Работа двух слайдеров отдельно друг от друга

$('.slider .slider-button').on('click', function(e) { 
 
    var slides = e.target.parentNode.parentNode.childNodes[3]; 
 
    var buttonPrev = $(this).hasClass('prev'), 
      buttonNext = $(this).hasClass('next'), 
      slideBlock = jQuery(slides.getElementsByClassName('slider-slide')), 
      slideActive = jQuery(slides.querySelector('.active')), 
      slideLen = slideBlock.length, 
      slideActiveIndex = slideActive.index(), 
      slidePrev = (slideActiveIndex - 1), 
      slideNext = (slideActiveIndex + 1), 
      isEvents = $(this).hasClass('-events'); 
    slideBlock.removeClass('active'); 
    if (isEvents) { 
      var catBlock = $('.slide-title.plus-cat .category .cat-item'), 
        catActive = $('.slide-title.plus-cat .category .cat-item.active'), 
        catLen = slideBlock.length, 
        catActiveIndex = slideActive.index(), 
        catPrev = (slideActiveIndex - 1), 
        catNext = (slideActiveIndex + 1); 
      catBlock.removeClass('active'); 
    } 
    if (buttonPrev) { 
      slideBlock.eq(slidePrev).addClass('active'); 
      if (isEvents) catBlock.eq(catPrev).addClass('active'); 
    } 
    if (buttonNext) { 
      if (slideNext == slideLen) var slideNext = 0; 
      slideBlock.eq(slideNext).addClass('active'); 
      if (isEvents) { 
        if (catNext == catLen) var catNext = 0; 
        catBlock.eq(catNext).addClass('active'); 
      } 
    } 
  } 
 
);

.slider { 
  display: grid; 
  grid-template-columns: 50px 1fr 50px; 
  grid-gap: 10px; 
  height: 200px; 
  margin-bottom: 20px; 
} 
 
.slider .slider-button, 
.slider .slider-content { 
  display: block; 
  width: 100%; 
} 
 
.slider .slider-button { 
  position: relative; 
  cursor: pointer; 
} 
 
.slider .slider-button div { 
  width: 50px; 
  height: 50px; 
  background-repeat: no-repeat; 
  background-size: auto 100%; 
  background-position: center center; 
  position: absolute; 
  top: calc(50% - 25px); 
} 
 
.slider .slider-button.prev div { 
  background-image: url('https://via.placeholder.com/50x50'); 
} 
 
.slider .slider-button.next div { 
  background-image: url('https://via.placeholder.com/50x50'); 
} 
 
.slider .slider-content { 
  overflow: hidden; 
} 
 
.slider .slider-content .slider-slide { 
  display: none; 
  width: 100%; 
  height: 100%; 
} 
 
.slider .slider-content .slider-slide img { 
  display: block; 
  width: 100%; 
  height: 100%; 
  object-fit: contain; 
} 
 
.slider .slider-content .slider-slide.active { 
  display: block; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<!-- Первый слайдер --> 
<div class="slider about"> 
  <div class="slider-button prev"> 
    <div></div> 
  </div> 
  <div class="slider-content"> 
    <div class="slider-slide active" style="background: red;"></div> 
    <div class="slider-slide" style="background: blue;"></div> 
    <div class="slider-slide" style="background: green;"></div> 
    <div class="slider-slide" style="background: yellow;"></div> 
  </div> 
  <div class="slider-button next"> 
    <div></div> 
  </div> 
</div> 
 
<!-- Второй слайдер --> 
 
<div class="slider events"> 
  <div class="slider-button prev -events"> 
    <div></div> 
  </div> 
  <div class="slider-content"> 
    <div class="slider-slide active" style="background: black;"></div> 
    <div class="slider-slide" style="background: aqua;"></div> 
    <div class="slider-slide" style="background: brown;"></div> 
  </div> 
  <div class="slider-button next -events"> 
    <div></div> 
  </div> 
</div>