Get atribute from Jquery slide when it is loaded

Question

I have this HTML code:

<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>

When I create the bxslider, each slide is created with a title in its 'li' tag. I want to be able to get this title each time that a slide is changed and write it in h4 tag (I already know how to do this last one thing).

By this way, the title of bxslide would be dynamic, because each slide has its own title.

This is how I create the bxslider when every data is already appended under its tag:

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

I would appreciated if you could help me. Thanks.

Mike.

Answer 1

This should do the trick by using onSlideAfter function.

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