加载 Jquery 幻灯片时获取属性

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

你可以为此使用 'onSlideAfter' 事件。检查下面的更新代码..

$('#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 幻灯片时获取属性

Get atribute from Jquery slide when it is loaded

javascript

jquery

html

tags

bxslider