bxslider with coverflow

HTML

<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<link rel="stylesheet" href="http://bxslider.com/lib/jquery.bxslider.css">
<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">
       ...

CSS

.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;
}

JavaScript

jQuery(function($){
	
var slider = $('.bxslider').bxSlider({
 minSlides: 1,
  moveSlides:1,
  maxSlides: 3,
   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/2).addClass("active-slide")
    }
});
   
    
$('#slider-next').click(function(){
  slider.goToNextSlide();
    
  return false;
});
$('#slider-prev').click(function(){
  slider.goToPrevSlide();
  
  return false;
});

});