Override the Names of bxSlider Custom pre next Button with Glyphicons?

Question

I want to override the bx slider prev, next with glyphicons chevron left and right. How can I get on that one?

Here is Code :

      <div class="bx-controls-direction">
       <a class="bx-prev" href="">Prev</a>
       <a class="bx-next" href="">Next</a></div> 

How can I replace the prev and next with the below span code in bx slider?

<span class="glyphicon glyphicon-chevron-left orange"></span>
<span class="glyphicon glyphicon-chevron-Right orange"></span>

Answer 1

bxSlider provides a nextText and prevText option to change the text of the controls. https://github.com/stevenwanderski/bxslider-4#user-content-controls

It should be possible to write your icon html direct into the option as the string will be directly added on slider creation: https://github.com/stevenwanderski/bxslider-4/blob/master/src/js/jquery.bxslider.js#L665

$(document).ready(function(){
  $('.bxslider').bxSlider({
    prevText: '<span class="glyphicon glyphicon-chevron-left orange"></span>',
    nextText: '<span class="glyphicon glyphicon-chevron-right orange"></span>'
  });
});

hope that helps!