bxslider custom pager with style

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

by Ken Watanabe

HTML

<script src="http://cdn.jsdelivr.net/bxslider/4.1.1/jquery.bxslider.min.js"></script>
<!-- <div id="bx-pager">

</div>
 -->
<!-- <figure class="thumbnail half"> -->


<ul class="bxslider">
    <li>
        <img class="thumbnail half" src="http://u-p.co/wp-content/uploads/2006/09/U-P_Golden_Age_1.jpg" />
    </li>
    <li>
        <img class="thumbnail half" src="http://u-p.co/wp-content/uploads/2015/10/U-P_VCA_1.jpg" />
    </li>
    <li>
        <img class="thumbnail half" src="http://u-p.co/wp-content/uploads/2015/10/U-P_VCA_5.jpg" />
    </li>
    <li>
        <img class="thumbnail half" src="http://u-p.co/wp-content/uploads/2015/10/U-P_VCA_2.jpg" />
    </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>
<!-- </figure> -->

CSS

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

img { height:100%; }
.thumbnail { height:11em; }
.half { width:50%; background:red; }

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