Javascript 向缩略图滑块添加文本/标题

我需要为每张图片添加一个标题。但是标题必须在滑块旁边的灰色框中。你可以在这里看到这个想法的一个例子：

基本上，每个图像都需要有标题、画布上的油画和尺寸标签。但它需要随着每一张图片而改变

希望有人能帮助我。你应该能够使用上面的链接来检查代码，但是如果你需要什么，请告诉我，我会把它贴上去

先谢谢你

---

李

我无法测试这一点，因为我没有你所有的照片，但我认为这正是你想要的：）

萨福克之心

（在典型的雨天）1965年

油画

28 x 34英寸



萨福克之心

（在典型的雨天）1965年

油画

28 x 34英寸



萨福克之心

（在典型的雨天）1965年

油画

28 x 34英寸



萨福克之心

（在典型的雨天）1965年

油画

28 x 34英寸



萨福克之心

（在典型的雨天）1965年

油画

28 x 34英寸



萨福克之心

（在典型的雨天）1965年

油画

28 x 34英寸

如果不希望描述成为滑块的一部分，则需要将描述存储在某个位置（例如在javascript数组中）

---

然后，您可以使用flexslider的

before

选项（请参见上的步骤4）替换

的内容。绘制说明

到目前为止您尝试了什么？

<div class="col span_9_of_12">
<div id="slider" class="flexslider">
<ul class="slides">
<li>
<img src="images/large1.jpg" />
<div class="painting-description">
<p><strong>The Heart of Suffolk</strong></p>
<p>(on a typically rainy day) 1965</p>
<p>Oil on canvas</p>
<p>28 x 34 inches</p>
</div>
</li>
<li>
<img src="images/large2.jpg" />
<div class="painting-description">
<p><strong>The Heart of Suffolk</strong></p>
<p>(on a typically rainy day) 1965</p>
<p>Oil on canvas</p>
<p>28 x 34 inches</p>
</div>
</li>
<li>
<img src="images/large3.jpg" />
<div class="painting-description">
<p><strong>The Heart of Suffolk</strong></p>
<p>(on a typically rainy day) 1965</p>
<p>Oil on canvas</p>
<p>28 x 34 inches</p>
</div>
</li>
<li>
<img src="images/large4.jpg" />
<div class="painting-description">
<p><strong>The Heart of Suffolk</strong></p>
<p>(on a typically rainy day) 1965</p>
<p>Oil on canvas</p>
<p>28 x 34 inches</p>
</div>
</li>
<li>
<img src="images/large5.jpg" />
<div class="painting-description">
<p><strong>The Heart of Suffolk</strong></p>
<p>(on a typically rainy day) 1965</p>
<p>Oil on canvas</p>
<p>28 x 34 inches</p>
</div>
</li>
<li>
<img src="images/large6.jpg" />
<div class="painting-description">
<p><strong>The Heart of Suffolk</strong></p>
<p>(on a typically rainy day) 1965</p>
<p>Oil on canvas</p>
<p>28 x 34 inches</p>
</div>
</li>
</ul>
</div>
</div>