为什么伪类选择器工作错误

Question

$(function() {
  $('#a').click(function(e) {
    if ($(e.currentTarget).hasClass('dis')) {
      return;
    }
    $(e.currentTarget).next('div').children('.slider.show:first').removeClass('show').addClass('hide');
    $(e.currentTarget).next('div').children('.slider.show:last').next('.slider.hide').removeClass('hide').addClass('show');
    $('#b').removeClass('dis');
    if ($('.slider.show:last').next().length == 0) {
      $(e.currentTarget).addClass('dis');
    }
  });
  $('#b').click(function(e) {
    if ($(e.currentTarget).hasClass('dis')) {
      return;
    }
    $(e.currentTarget).prev('div').children('.slider.show:last').removeClass('show').addClass('hide');
    $(e.currentTarget).prev('div').children('.slider.show:first').prev('.slider.hide').removeClass('hide').addClass('show');
    $('#a').removeClass('dis');
    if ($('.slider.show:first').prev().length == 0) {
      $(e.currentTarget).addClass('dis');
    }
  });
});

.center-content {
  width: 1045px;
  margin: 100px auto;
  background-color: #DDD;
}

.slider {
  margin-right: 15px;
  width: 250px;
  height: 100px;
  border: 1px solid black;
}

.slider.show {
  display: block;
}

.show.slider:first-child {
  background-color: green;
}

.show.slider:last-child {
  background-color: red;
}

.slider.hide {
  display: none;
}

#a {
  float: left;
  height: 50px;
  width: 50px;
  margin: 25px 0px 0px -60px;
}

#b {
  float: right;
  height: 50px;
  width: 50px;
  margin: -75px -60px 0px 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="center-content">
  <button id="a"> [<] </button>
  <div style="display:flex;">
    <div class="slider hide">0</div>
    <div class="slider show">1</div>
    <div class="slider show">2</div>
    <div class="slider show">3</div>
    <div class="slider show">4</div>
    <div class="slider hide">5</div>
  </div>
  <button id="b">[>]</button>
</div>

我认为div(1)将为绿色，首次加载时div(4)将为红色。但事实并非如此。单击按钮后，div(0)为绿色，div(5)为红色，这意味着伪类选择器有效。

有谁知道为什么伪类选择器不起作用？