bxslider custom pager with style

Demo for: http://stackoverflow.com/questions/21209630/bxslider-custom-pager-with-style

HTML

<script src="http://cdn.jsdelivr.net/bxslider/4.1.1/jquery.bxslider.min.js"></script>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/bxslider/4.1.1/jquery.bxslider.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css">
<link rel="stylesheet" href="  //cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.css">
<ul class="bxslider">
    <li>
        <img src="http://placehold.it/800x250/5E7074/FFFFFF&text=Slide-One" />
    </li>
    <li>
        <img src="http://placehold.it/800x250/5E7074/FFFFFF&text=Slide-Two" />
    </li>
    <li>
        <img src="http://placehold.it/800x250/5E7074/FFFFFF&text=Slide-Three" />
    </li>
    <li>
        <img src="http://placehold.it/800x250/5E7074/FFFFFF&text=Slide-Four" />
    </li>
</ul>
<a href="#" class="pager-prev"><i class="icon-chevron-left"></i></a>

<a href="#" class="pager-next"><i class="icon-chevron-right"></i></a>

<div id="bx-pager">
    <ul>
        <li> <a data-slide-index="0" href="">Slide One</a>
        </li>
        <li> <a data-slide-index="1" href="">Slide Two</a>
        </li>
        <li> <a data-slide-index="2" href="">Slide Three</a>
        </li>
        <li> <a data-slide-index="3" href="">Slide Four</a>
        </li>
    </ul>
</div>

CSS

.bir {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    text-align: center;
    font-weight: bold;
    color: #555;
}
.animate:hover .bir {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
    -moz-animation: zoomIn 0.7s;
    -webkit-animation: zoomIn 0.7s;
    animation: zoomIn 0.7s;
}
ul.bxslider {
    margin: 0;
    padding: 0;
}
a.pager-prev, a.pager-next {
    display: inline-block;
    line-height:60px;
    padding:0 20px 0 20px;
    background:#5E7074;
    text-decoration: none;
    color:#FFF;
}
#bx-pager {
    position: relative;
    padding: 0;
    margin: 0;
    top: 60px;
    list-style-type: none;
    background-color: #036;
    color: #FFF;
    width: 100%;
    font: normal 90% arial, helvetica, sans-serif;
    text-align: center;
    width: 800px;
}
#bx-pager ul {
    list-style: none;
    margin:0;
    padding:0;
    float: left;
    width: 100%;
}
#bx-pager li {
    display:inline-block;
    margin:0;
    padding:0;
    background: #5E7074;
    width: 24%;
}
#bx-pager li a {
    text-decoration: none;
    background-color: #5E7074;
    padding: 0;
    margin: 0;
    color: #FFF;
    line-height:60px;
    display: block;
}
#bx-pager li a.active, #bx-pager li a:hover {
    background-color: #4C5B60;
    font-weight: bold;
}
#bx-pager li a.active:after {
    content:' (Active)';
}

JavaScript

var slider = $('.bxslider').bxSlider({
    pagerCustom: '#bx-pager'
});

$('a.pager-prev').click(function () {
    var current = slider.getCurrentSlide();
    slider.goToPrevSlide(current) - 1;
});
$('a.pager-next').click(function () {
    var current = slider.getCurrentSlide();
    slider.goToNextSlide(current) + 1;
});