show text under each image from alt property in JCarousel

Question

I am using JCarousel for creating a slider on my site. Now it is itself easy to implement, I am having hard time showing a description under each image taken from the alt property.

<div class="jcarousel-wrapper">
    <div class="jcarousel" data-jcarousel="true">
    <ul>                         
        <li><img src="http://www.abcd.com/img1_0.jpg  " width="900" height="290" alt="dfgdfg dfgdfgjpg  "></li>  
        <li><img src="http://www.abcd.com/img2_0.jpg  " width="900" height="290" alt="dfgdfg dfgdfgjpg  "></li>
        <li><img src="http://www.abcd.com/img3_0.jpg  " width="900" height="290" alt="dfgdfg dfgdfgjpg  "></li>
        <li><img src="http://www.abcd.com/img4_0.jpg  " width="900" height="290" alt="dfgdfg dfgdfgjpg  "></li>
        <li><img src="http://www.abcd.com/img5_0.jpg  " width="900" height="290" alt="dfgdfg dfgdfgjpg  "></li>
        <li><img src="http://www.abcd.com/img6_0.jpg  " width="900" height="290" alt="dfgdfg dfgdfgjpg  "></li>

    </ul>
   </div>
</div>

Now, I am hoping there is some way through JS and I'll be grateful if you could assist here.

Thanks.

score 2 · Accepted Answer · answered May 01 '15 at 01:31

You can do something like this:

$('.jcarousel').on('jcarousel:visiblein', 'li', function(event, carousel) {
    var caption = $(this).find("img").prop("alt");
    $('.jcarousel-caption').text(caption);
});

Set the class jcarousel-caption on the element where you want the text to go.

Working example: http://jsfiddle.net/alan0xd7/yz1r62jq/

show text under each image from alt property in JCarousel

1 Answers1