jquery - 图片幻灯片上的文字 - jQuery cycle2

Question

我正在为幻灯片放映使用 jquery cycle2 插件。现在我面临挑战。我可以使用该插件制作幻灯片，但问题是我想在图像顶部写一些文本，而文本只需要为该特定图像出现。但是，如果我使用 css 使幻灯片 div 位置相对，而文本 div 位置绝对，则不会发生任何事情。

HTML 代码:

<div class="offset1 span12 cycle-slideshow">
    <img src="assets/img/1.jpg">
        <div id="text1">
            <strong>A</strong><span>lpha</span>
        </div>
    <img src="assets/img/2.jpg">
    <img src="assets/img/3.jpg">
</div>

CSS 代码:

.cycle-slideshow {
position: relative; 
}
#text1 {
    position: absolute; 
    top: 200px; 
} 

任何帮助都会非常高兴。

Answer 1

按照步骤 described in the documentation :

1. 在循环幻灯片中添加一个类为 .cycle-overlay 的 div
   • 添加 CSS 规则
2. 在幻灯片上添加 data-cycle-title 和 data-cycle-desc 属性。如有必要，留空。

Demo here