javascript - 如何(有效地)将标题添加到由 javascript 填充的 Bootstrap 轮播

Question

我目前正在为我的公司构建网络教程。它应该指导用户设置他们新的公司拥有的 iOS 设备。

目前我是这样做的:

1. 使用 MS PowerPoint 设置页面(添加文本和内容)，

2. 将其导出为 .png

3. 将此添加到网站。

这没关系，但也许用 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 之间的任何内容将出现在幻灯片中。您可以添加任何 html 元素，如图像、标题、段落等。您甚至可以为它们分配 id/classes 以定位它们并应用格式。

示例:

<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

以下是我如何为我的一位客户修改 Bootstrap 轮播: