[ bxSlider ] pager, left, right custom

[ html ]

<div class="slide_wrap">
  <div id='prevBtn' class='slide_prev'><a href="#">L</a></div>
  <div id='nextBtn' class='slide_next'><a href="#">R</a></div>
  
  <ul>
    <li><img src="" alt=""></li>
    <li><img src="" alt=""></li>
  </ul>		
</div>

<div id='slide_pager'>
  <a data-slide-index="0" href=""> <div class='slide_pager'></div> </a> 
  <a data-slide-index="1" href=""> <div class='slide_pager'></div> </a> 
</div>

[ javascript ]

$(document).ready(function(){
  var slider = $('.slide_wrap>ul').bxSlider({
    auto: true, //mode:'fade',
    infiniteLoop:true,
    hideControlOnEnd:true,
    pager: true, 
    pagerCustom: "#slide_pager"
  });

  $('#prevBtn').on( 'click', function () {
    slider.goToPrevSlide();
    return false;
  });

  $('#nextBtn').on( 'click', function () {
    slider.goToNextSlide();
    return false;
  } );

  $(document).on('click','.bx-next, .bx-prev',function() {
    slider.stopAuto();
    slider.startAuto();
  });	
});