Question

我有这个HTML代码：

<div class = "col-lg-6 col-xs-6 sectionPanel panel panel-default">
    <div>
        <h4 align="center">Information of </h4>
        <hr/>
    </div>
    <br/>
    <div id="addressesGroupCtrl1" class="center">
        <ul class="bxslider" id="bxId"></ul>
    </div>
</div>

当我创建bxslider时，每个幻灯片都在其“li”标签中创建一个标题。我希望每次更改幻灯片时能够获得此标题并将其写入h4标签（我已经知道如何执行此操作）。

通过这种方式，bxslide的标题将是动态的，因为每张幻灯片都有自己的标题。

这是我在每个数据已经附加在其标记下时创建bxslider的方式：

$('#bxId').bxSlider({
   adaptiveHeight: true,
    mode: 'fade'
});

如果你能帮助我，我将不胜感激。感谢。

麦克

Answer 1

哟可以使用＆＃39; onSlideAfter＆＃39;这件事。检查下面的更新代码..

$('#bxId').bxSlider({
    adaptiveHeight: true,
    mode: 'fade',
    onSlideAfter: function($slideElement, oldIndex, newIndex){
        $('h4').html($($slideElement).attr('title'));
    }
})

Answer 2

这应该通过使用onSlideAfter函数来实现。

$('#bxId').bxSlider({
    adaptiveHeight: true,
    mode: 'fade',
    onSlideAfter: function($slideElement, oldIndex, newIndex){
        $('h4').html($slideElement[0].innerText);
    }
});

加载时从Jquery幻灯片获取属性

2 个答案: