在Supersized 3.2的每个页面上添加文本 - 全屏幻灯片jQuery

Question

我正在寻找有关Supersized Slideshow Jquery的答案。我想在每张幻灯片上添加每个HTML / TEXT。 （即 - 如果有4页，每张幻灯片将嵌入4个单独的文本。）

我知道在将“html文本添加到超大的jquery图像滑块”之前有一个讨论。

Re：将html文本添加到超大的jquery图像幻灯片中 adding html text to supersized jquery image slide

我遵循了方向，但我不明白创建'php'页面并“在幻灯片的同一页面中放置一个空白div #brief_holder”。部分。另外，我很好奇这段代码真的有效......

有没有人解决了这个问题并得到了一些答案......？

非常感谢您的善意，我期待着您的回复。

最佳， 邦尼

Answer 1

这是一个粗略的例子，因此您可以了解如何执行此操作。抱歉，我无法让fsfiddle与超大号一起使用，所以转到http://buildinternet.com/project/supersized/slideshow/3.2/slide.html并将下面的代码粘贴到chrome dev控制台。在实现时，这个shoud应该在加载超级化后运行。

var slide_text_array = [ 'slide 1 text', 'slide 2 text', 'slide 3 text', 'slide 4 text', 'slide 5 text', 'slide 6 text', 'slide 7 text', 'slide 8 text', 'slide 9 text', 'slide 10 text' ];

$('#supersized li a img').each( function(i,slide_img){ //get each loaded slide
    $(slide_img).css('z-index', '100');//to make the image appear behind the text
    var slide_a = $(slide_img).parent()
    $(slide_a).prepend('<h1 style="font-size: 100px; z-index: 200; position: absolute;">'+ slide_text_array[i] +'</h1>'); //insert text
});

您可以在每张幻灯片开始之前添加文本，而不是在超大限度加载后循环播放所有幻灯片。看看http://buildinternet.com/project/supersized/docs.html#theme-before，但这应该让你去。如果您仍然遇到问题，请尝试设置jsfiddle.net或codepen示例，以便我们为您编辑它。祝你好运！