BXslider active class on center div with 5 slides

Question

I am literally pulling my hair out on this problem. I have 5 slides in the bxslider and I am trying to have a active class on the 3rd slide out of the 5 slides on the page, which it does when the slide 1st loads... Now when I click the next button the 1st time the active class does not go to the next element. It stays on the current slide and then moves to the next slide the 2nd time I click the next button. So im thinking the next() function isnt working. Or is it something im doing wrong?

jQuery(function($){
 
var slider = $('.bxslider').bxSlider({
 minSlides: 1,
  moveSlides:1,
  maxSlides: 5,
   pager:false,
  controls:false,
  slideWidth: 360,
  slideMargin: 0,
    onSlideBefore : function($slideElement, oldIndex, newIndex){ // your code here 

$(".bxslider li").removeClass("active-slide");
        $slideElement.next().addClass("active-slide");
},
    onSliderLoad:function(index){
       
$(".bxslider li").eq(1+$(".bxslider .bx-clone").length/3).addClass("active-slide");
    }
});
   
    
$('#slider-next').click(function(){
  slider.goToNextSlide();
    
  return false;
});
$('#slider-prev').click(function(){
  slider.goToPrevSlide();
  
  return false;
});

});

.active-slide{
background:#f00 !important;
}

.scorboard {
 float: left;
 width: 100%;
 height: 168px;
 background-image: url(images/scor-bg.png);
 background-repeat: no-repeat;
 background-position: center top;
 color: #000;
 padding-top: 22px;
}
.scorboard li {
 background-color:#ccc;
    margin:0 5px;
}
.scorboard .opponent {
 float: left;
 font-size: 18px;
 width: 42%;
 text-align: center;
}
.scorboard .lss {
 float: left;
 font-size: 18px;
 width: 42%;
 text-align: center;
}
.scorboard .lss h4 {
 text-align:left;
}
.scorboard .opponent h4 {
 text-align:right;
}
.vs {
   float: left;
  margin: 26px 10px 0px 10px;
  width: 10%;
  text-align: center;
}
.scorboard h2 {
 font-size: 14px;
 font-family: 'octin_sportsregular';
 margin-top: 26px;
 margin-bottom: 2px;
 text-align: center;
 float: left;
 width: 100%;
}
.scorboard h3 {
 font-size: 18px;
 font-weight: bold;
 color: #b90000;
 margin-top: 3px;
 text-align: center;
 float: left;
 width: 100%;
 font-family: 'octin_sportsregular';
}
.scorboard h4 {
 float: left;
 width: 100%;
}
li.active {
  transform: scale(1.2);
  top: -9px;
    background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="http://bxslider.com/lib/jquery.bxslider.css" rel="stylesheet"/>
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<div class="scorboard">
  <ul  class="bxslider">
    <li>
      <h2>4/30/15 6:00 pm</h2>
      <div class="opponent">
        <h4>Pistons85</h4>
      </div>
      <div class="vs">vs</div>
      <div class="lss">
        <h4> LSS
          105</h4>
      </div>
      <h3>Final</h3>
    </li>
    <li>
      <h2>5/13/15 12:00 am</h2>
      <div class="opponent">
        <h4>Nuggets101</h4>
      </div>
      <div class="vs">vs</div>
      <div class="lss">
        <h4> LSS
          98</h4>
      </div>
      <h3>Final</h3>
    </li>
    <li>
      <h2>5/12/15 12:00 am</h2>
      <div class="opponent">
        <h4>Hawks105</h4>
      </div>
      <div class="vs">vs</div>
      <div class="lss">
        <h4> LSS
          102</h4>
      </div>
      <h3>Final</h3>
    </li>
    <li>
      <h2>4/24/15 6:00 pm</h2>
      <div class="opponent">
        <h4>Trail Blazers97</h4>
      </div>
      <div class="vs">vs</div>
      <div class="lss">
        <h4> LSS
          101</h4>
      </div>
      <h3>Final</h3>
    </li>
    <li>
      <h2>5/2/15 12:00 am</h2>
      <div class="opponent">
        <h4>Jazz101</h4>
      </div>
      <div class="vs">vs</div>
      <div class="lss">
        <h4> LSS
          98</h4>
      </div>
      <h3>Final</h3>
    </li>
    <li>
      <h2>4/30/15 6:00 pm</h2>
      <div class="opponent">
        <h4>Pistons85</h4>
      </div>
      <div class="vs">vs</div>
      <div class="lss">
        <h4> LSS
          105</h4>
      </div>
      <h3>Final</h3>
    </li>
    <li>
      <h2>5/13/15 12:00 am</h2>
      <div class="opponent">
        <h4>Nuggets101</h4>
      </div>
      <div class="vs">vs</div>
      <div class="lss">
        <h4> LSS
          98</h4>
      </div>
      <h3>Final</h3>
    </li>
    <li>
      <h2>5/12/15 12:00 am</h2>
      <div class="opponent">
        <h4>Hawks105</h4>
      </div>
      <div class="vs">vs</div>
      <div class="lss">
        <h4> LSS
          102</h4>
      </div>
      <h3>Final</h3>
    </li>
    <li>
      <h2>4/24/15 6:00 pm</h2>
      <div class="opponent">
        <h4>Trail Blazers97</h4>
      </div>
      <div class="vs">vs</div>
      <div class="lss">
        <h4> LSS
          101</h4>
      </div>
      <h3>Final</h3>
    </li>
    <li>
      <h2>5/2/15 12:00 am</h2>
      <div class="opponent">
        <h4>Jazz101</h4>
      </div>
      <div class="vs">vs</div>
      <div class="lss">
        <h4> LSS
          98</h4>
      </div>
      <h3>Final</h3>
    </li>
    <li>
      <h2>4/30/15 6:00 pm</h2>
      <div class="opponent">
        <h4>Pistons85</h4>
      </div>
      <div class="vs">vs</div>
      <div class="lss">
        <h4> LSS
          105</h4>
      </div>
      <h3>Final</h3>
    </li>
  </ul>
</div>
<div class="outside">
  <span id="slider-prev">pre</span> | <span id="slider-next">next</span>
</div>

Answer 1

Fixed this by using.

 $slideElement.next().next().addClass("active-slide");