jQueryサイクルaddSlides "alt"

Question

私の問題の答えは見つかりません。私はそれが非常に小さいものだと思うが、私は現在私の脳にいくつかの結び目を持っている。

私はスタイリングのため<李>要素を必要とするが、それはせずに罰金だしながら、特定の要素（＃1 C11）にalt属性を追加する機能は、<li>を使用しているとき<img>前に動作するように表示されません。

私を助けることができますか？

は、ここに私のJSです：

$(document).ready(function() { 

$('#slideshow1').cycle({ 
    fx:  'scrollHorz', 
    auto: false, 
    before: onBefore, 
    prev: '#prev', 
    next: '#next', 
    timeout: 0, 
    sync: 1, 
    speed: '100', 
    pagerAnchorBuilder: pagerFactory, 
    after:  function() { 
    $('#c1').html(this.alt); 
    } 
}); 

var slidesAdded = false; 
function onBefore(curr, next, opts) { 
    if (!opts.addSlide || slidesAdded) 
     return; 
    opts.addSlide('<li><img src="loadimages/1.jpg" width="800" height="560" alt="Beach 1" /></li>'); 
    opts.addSlide('<li><img src="loadimages/2.jpg" width="800" height="560" alt="Beach 2" /></li>'); 
    opts.addSlide('<li><img src="loadimages/3.jpg" width="800" height="560" alt="Beach 3" /></li>'); 
    opts.addSlide('<li><img src="loadimages/4.jpg" width="800" height="560" alt="Beach 4" /></li>'); 
    slidesAdded = true; 
}; 
function pagerFactory(idx, slide) { 
    var s = idx > 2 ? ' style="display:none"' : ''; 
    return '<li'+s+'><a href="#">'+(idx+1)+'</a></li>'; 
}; 

---

、ここでHTMLです：

<div style="text-align:center;margin:auto;width:300px"> 
    <a href="#"><span id="prev">Prev</span></a> 
    <a href="#"><span id="next">Next</span></a> 
</div> 

<div id="slideshow1" class="pics"> 
<li><img src="loadimages/1.jpg" width="800" height="560" alt="Beach 1" /></li> 
<li><img src="loadimages/4.jpg" width="800" height="500" alt="Beach 2" /> </li> 

</div> 

Answer 1

それはfigureタグのfigcaption内部Altタグのスタイルを設定することが可能ですjQueryのを使用します。このjQueryのに続い

<figure> 
    <img class="img-fluid" src="image.png" alt="This content will be appended inside the Figure Caption tag!"> 
</figure>` 

：

<script src="js/jquery.js"></script> 
<script> 
$('img', 'figure').each(function() { 
     $(this).parent().append('<figcaption>' + this.alt + '</figcaption>'); 
    }); 
</script> 

このHTMLを使用して

.img-fluid { width: 100%; } 
figure { display:block; position: relative; } 

figcaption { display: block; } 

：ここでは、このようになりますフィドル（https://jsfiddle.net/0Lqxb4cp/）があります