Question

So I have this code:

     <script type="text/javascript">
    $(function(){
  $('.content_slider').bxSlider({
    pager: true,
    buildPager: function(slideIndex){
      switch (slideIndex){
        case 0:
          return '<a href=""><img src="images/bullet1.png" /></a>';
        case 1:
          return '<a href=""><img src="images/bullet1.png" /></a>';
        case 2:
          return '<a href=""><img src="images/bullet1.png" /></a>';
        case 3:
          return '<a href=""><img src="images/bullet1.png" /></a>';
      }
    }
  });
});
    </script>

How can I set another .png image to display on the “active” slide ?

For example, when you are on the slide “nr. 2” to the second .png image from the pager to be bullet2.png instead of bullet1.png as it is set in the switch block.

Regards.

Answer 1

You mean like this?

'<a href=""><img src="images/bullet'+slideIndex+'.png" /></a>';

In which case, you can do away with the switch entirely