The current method I use simply increments an index value on afterChange event, but this breaks when the user navigates backwards. How can I determine what the current image index is?

(function($){ $(function(){

  var i = 0
  var swapColor = function(){
    var index = i++ % $("#slider img").length // gets the calculated index according to hom many times the slider has swapped slides
    var color = $("#slider img").eq(index).data('color')
    $(".nivo-caption, .nivo-html-caption").css({backgroundColor: color})  
  }

  $('#slider').nivoSlider({
    afterLoad: swapColor,
    beforeChange: swapColor
  });

}) })(jQuery);

The current method I use simply increments an index value on afterChange event, but this breaks when the user navigates backwards. How can I determine what the current image index is?

(function($){ $(function(){

  var i = 0
  var swapColor = function(){
    var index = i++ % $("#slider img").length // gets the calculated index according to hom many times the slider has swapped slides
    var color = $("#slider img").eq(index).data('color')
    $(".nivo-caption, .nivo-html-caption").css({backgroundColor: color})  
  }

  $('#slider').nivoSlider({
    afterLoad: swapColor,
    beforeChange: swapColor
  });

}) })(jQuery);

• javascript
• jquery
• nivo-slider

1 Answer 1

I did it using this method...

var index = $(".nivo-controlNav .active").attr('rel')