javascript - (Nivo Slider) 从 Image 中获取标题并添加到 Div

Question

我正在尝试从当前幻灯片（图像）中获取标题，然后将标题数据添加到 div。这里是 nivo 滑块的演示。

我尝试在 Nivo 滑块中使用 afterChange 函数，但没有任何运气。

afterChange: function(){
   $('#status .caption').data('nivo:vars').currentSlide.attr('title');
}

Answer 1

我已经做到了。希望这可以帮助某人。

  current_title = jQuery('#slider').data('nivo:vars').currentImage.attr('title');
  jQuery('#slider .caption').text(current_title);

Answer 2

你必须使用这样的东西：我没有对 Nivo 做过任何事情，我不确定 '.data('nivo:vars').currentSlide.attr('title')' 是否真的存在......

afterChange: function() {
    var title = $('#slider').data('nivo:vars').currentSlide.attr('title');
    $('#status .caption').html(title);
}

Answer 3

var sliderSelector = '#slider'; // Replace with your slider selector
var index = 0; // You start with slide 0 as the first slide

controlNav: true, // This solution relies on this to work
$(sliderSelector).nivoSlider({
    afterChange: function() {
        index = $(sliderSelector + ' .nivo-controlNav .nivo-control').filter('.active').index();
        showCaption(sliderSelector, index);
    },
    afterLoad: function() {
        showCaption(sliderSelector, index);
    }
});

和 showCaption 功能

function showCaption(sliderSelector, index) {
    var title = $($(sliderSelector + ' img').get(index)).prop('title');
    if (title.length > 0) { // Determines if it has to show a caption
        var caption = $(sliderSelector + ' .nivo-caption').html(); // Gets the current caption
        console.log(caption);
    }
}