Изменение, если последнее изображение в баннере активен

Question

HTML:

<ul class="bxslider"> 
    <li><img src="image.jpg" alt="" /></li> 
    <li><img src="image.jpg" alt="" /></li> 
    <li><img src="image.jpg" alt="" /></li> 
</ul> 
<a id="selected" href="#">details</a> 

Я использую bxslider и я хочу, если последний image является activea#selected будет иметь класс .select это возможно

образец: http://jsfiddle.net/NXzcx/83/

JS

$('.bxslider').bxSlider({ 
    auto: true, 
    infiniteLoop: false, 
    hideControlOnEnd: true, 
}); 

$(document).ready(function(){ 
       if (slider.active.index == 0){ 
       $('#selected').addClass("select"); 
      } 

      }); 

Answer 1

Add onAfterSlide callback to bxSlider.

$('.bxslider').bxSlider({ 
    auto: true, 
    infiniteLoop: false, 
    hideControlOnEnd: true, 
    onAfterSlide: function (currentSlide) { 
     if(currentSlide == $('.bxslider').children('li.pager').length -1) { 
      $('#selected').addClass("select"); 
     } else { 
      $('#selected').removeClass("select"); 
     } 
    } 
}); 

DEMO