How to handle an event through bxSlider callback api?

Question

I am using bxSlider on my website for a slideshow. Now what I want to do is, use a manually controlled slideshow and show text content related to it in below slideshow:

What code I have at this moment:

<!--SlideShow Pictures-->
<!--NOTE:  We are using a un-organised list-->
<ul class="slider">
    <li><img src="img\hm1.jpg" /></li>
    <li><img src="img\hm2.jpg" /></li>
    <li><img src="img\hm3.jpg" /></li>
    <li><img src="img\hm4.jpg" /></li>
</ul>

<!--Script for controlling SlideShow-->
<script type="text/javascript">
$(document).ready(function(){
    $('.slider').bxSlider(
    {
        adaptiveHeight: true,
        mode: 'fade',                   
        onSlideAfter: function(){

            I need a conditional statement here!`

            document.getElementById('desc').innerHTML = 'yes it does! (for now)';
        }
    });
});     
</script>

<div id="desc">
    Hope this works!
</div>

Now what I need is a conditional statement to check which picture is being displayed (hm1/hm2/hm3/hm4). I have not modified any part of bxSlider's original code. It is present on bxslider.com Let me know if u need more info.

Answer 1

From the slider's documentation, the onSlideAfter callback function should look like this:

function($slideElement, oldIndex, newIndex){ // your code here }

• $slideElement: jQuery element of the destination element
• oldIndex: element index of the previous slide (before the transition)
• newIndex: element index of the destination slide (after the transition)

The newIndex variable should give you just what you need.

$(document).ready(function(){
  $('.slider').bxSlider({
      adaptiveHeight: true,
      mode: 'fade',
      onSlideAfter: function($slideElement, oldIndex, newIndex){
        switch(newIndex){
          case 0 : /*code for slide 1*/; break;
          case 1 : /*code for slide 2*/; break;
          /*etc*/
        }
    }
});