JQuery - Display Alt attribute below each slide image

1

So, I need help with a code I'm trying to develop. The site is all in Wordpress, and has a plugin called Master Slider. I need to develop a script that takes the Alt attribute of the images and displays below each image, and that attribute changes according to the photo, obviously.

JQUERY CODE WHAT I POSSESS:

    $( ".master-slider" ).append( "<p class='textoProduto'></p>" );
    $('.master-slider').each(function(){
    $(this).find('.textoProduto').html($(this).find('img').attr('alt')); 
    });

HTML DO PLUGIN:

    <!-- MasterSlider -->
    <div id="P_MS5a69ac9d1f2cf" class="master-slider-parent msl ms-parent-id-1" style="max-width:800px;"  >
        <!-- MasterSlider Main -->
        <div id="MS5a69ac9d1f2cf" class="master-slider ms-skin-default" >                    
        <div  class="ms-slide" data-delay="3" data-fill-mode="fill"  >
           <img src="http://www.sulpeneiras.com.br/wp-content/plugins/master-slider/public/assets/css/blank.gif"alt="contour-screen" title="" data-src="http://www.sulpeneiras.com.br/wp-content/uploads/2018/01/contour-screen-2-800x480.jpg"/><imgclass="ms-thumb" src="http://www.sulpeneiras.com.br/wp-content/uploads/2018/01/contour-screen-2-140x80.jpg"alt="contour-screen" />
<div class="ms-thumb" ><div class="ms-tab-context"><div class=&quot;ms-tab-context&quot;></div></div>
        </div>
        </div>
        <div  class="ms-slide" data-delay="3" data-fill-mode="fill"  >
            <img src="http://www.sulpeneiras.com.br/wp-content/plugins/master-slider/public/assets/css/blank.gif"alt="PENEIRA-FABRICADO-EM-POLIETILENO" title="" data-src="http://www.sulpeneiras.com.br/wp-content/uploads/2017/11/PENEIRA-FABRICADO-EM-POLIETILENO-1-800x480.jpg"/><imgclass="ms-thumb" src="http://www.sulpeneiras.com.br/wp-content/uploads/2017/11/PENEIRA-FABRICADO-EM-POLIETILENO-1-140x80.jpg"alt="PENEIRA-FABRICADO-EM-POLIETILENO" />
        <div class="ms-thumb" ><div class="ms-tab-context"><div class=&quot;ms-tab-context&quot;></div></div>
       </div>               
    </div>
 </div>
<!-- END MasterSlider Main -->   
</div>
<!-- END MasterSlider -->

WHAT I WANT TO APPEAR ON ALL IMAGES

But the problem is that until now I have only been able to show the alt of the first slide image, and it is fixed for all, and what I want is when I change the slide, change alt text

    
asked by anonymous 25.01.2018 / 11:17

0 answers