自动从一个div复制文本,并用fullpage.js替换另一个div中的文本



对于我的作品集,我正在用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/

最新更新