javascriptで埋め込まれたブートストラップカルーセルにキャプションを追加する方法

Question

私は現在自分の会社のWebチュートリアルを作成しています。それは、ユーザーが新しい会社所有のiOSデバイスを設定するように案内してくれるはずです。

は現在、私はそれをこのようにやっている：

1. は

2. が追加

3. を.pngのようにそれをエクスポートし、MSパワーポイント（いるAddIntテキストとか）でページを設定しますこれはウェブサイトにあります。

これは問題ありませんが、HTML/JS/CSSのすべての機能を実行するのに役立ちます。

同様に、イメージファイルをロードし、それに応じて別の単一ファイルからキャプションを読み込みます。私は、JavaScriptやjqueryのようなものではありません。私は.ymlにキャプションを入れることを考えています。

これは私の現在のコードです。 var laengeは読み込まれるイメージの数です。

var laenge = 45; 
 
$(document).ready(function() { 
 
    for (var i = 1; i <= laenge; i++) { 
 
    $('<div class="item"><img src="images/Bestandsgeraete/Folie' + io + '.png" class="img-responsive"><div class="carousel-caption"></div></div>').appendTo('.carousel-inner'); 
 
    } 
 
    $('#myCarousel').find('.item').first().addClass('active'); 
 
});

<div id="myCarousel" class="carousel slide" data-ride="carousel" align="center"> 
 
    <!-- Wrapper for slides --> 
 
    <div class="carousel-inner" align="center" role="list"> 
 
    </div> 
 

 
    <!-- Controls --> 
 
</div>

Answer 1

JavaScriptを使用して混乱する必要はありません。 HTMlとCSSを変更するだけです。 <div class="item"></divの間のものはスライドに表示されます。 image、heading、paragraphなどのhtml要素を追加できます。 id/classesを指定してそれらを対象とし、formatingを適用することもできます。

例：ここでは

<div class="item active"> 
    <img src="xyz"> 
    <h1>This is a heading</h1> 
    <p>this is a paragraph</p> 
    <div class="anyDiv"></div> 
</div 
<div class="item"> 
    <img src="xyz"> 
    <h1>This is a heading</h1> 
    <p>this is a paragraph</p> 
    <div class="anyDiv"></div> 
</div 

が、私は私のクライアントのいずれかのブートストラップカルーセルを変更する方法です。詳細は