对于我的作品集,我正在用fullpage.js构建一个新网站。我的目标是将数据锚与脚本结合起来,在每个幻灯片上复制一些隐藏的文本(.contation(,并在加载幻灯片时将其替换为另一张幻灯片(.courrent caption(。理想情况下,它应该同时垂直和水平工作(部分和幻灯片(,尽管我最初的投资组合只是水平的。我在幻灯片中使用afterSlideLoad,并且我已经读到,afterLoad对于第一张幻灯片/部分是必要的。
我看过这个解决方案:在幻灯片更改上更改目标潜水的内容,但它不起作用。我想fullpage.js自2015年以来发生了重大变化,或者els出了问题。
我几乎没有js/jquery编程技能,如果有人能帮助我,让我的JSFiddle在水平和垂直方向上工作,从而帮助其他人,我将不胜感激。
到目前为止,我已经得到了这个(也可以参见下面的JSFiddle(:
<div class="current-caption"><p>.current-caption</p></div>
<div id="fullpage">
<div class="section" data-anchor="S1" style="background-color: #ddd;">
<div class="slide" data-anchor="S1s1">
<h1>S1s1</h1>
<div class="caption"><p>Caption text for S1s1</p></div>
</div>
<div class="slide" data-anchor="S1s2">
<h1>S1s2</h1>
<div class="caption"><p>Caption text for S1s2</p></div>
</div>
</div>
<div class="section" data-anchor="S2" style="background-color: #fff;">
<div class="slide" data-anchor="S2s1">
<h1>S2s1</h1>
<div class="caption"><p>Caption text for S2s1</p></div>
</div>
<div class="slide" data-anchor="S2s2">
<h1>S2s2</h1>
<div class="caption"><p>Caption text for S2s2</p></div>
</div>
</div>
</div>
var myFullpage = new fullpage('#fullpage', {
verticalCentered: true,
autoScrolling: true,
controlArrows: true,
afterSlideLoad: function(section, origin, destination, direction){
var slide_html = $(this).find(".caption").html ();
$(".current-caption").html(slide_html);
},
afterLoad: function(origin, destination, direction){
var section_html = $(this).find(".caption").html ();
$(".current-caption").html(section_html);
}
});
我的JSFiddle在这里:https://jsfiddle.net/JorgenB/x78qo2f9/16
试试这个:
var slide_html = $(destination.item).find(".caption").text();
$(".current-caption").text(slide_html);
https://jsfiddle.net/tilwinjoy/hspo65v9/11/