Question

我正试图从当前幻灯片（图片）中获取标题，然后将标题数据添加到div中。 Here nivo slider's demo.

我尝试在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);
    }
}

（Nivo Slider）从Image抓取标题并添加到Div

3 个答案: