Fullpage.js + figcaption + lazyload fade in

Question

私は私の小さな建築会社のウェブページを作ろうとしている初心者で、プロのプログラマーではありません。私はFullpage.jsに出くわしました。私はそれを試してみるべきだと思いました。 http://codepen.io/nor159/pen/RayPZBを参照してください。

<section class="section"> 
<figure class="slide"> 
    <img data-src="http://placekitten.com/g/400/600"> 
    <figcaption>Section 1, slide 1/4</figcaption> 
</figure> 
<figure class="slide"> 
    <img data-src="http://placekitten.com/g/800/300"> 
    <figcaption>Section 1, slide 2/4</figcaption> 
</figure> 
<figure class="slide"> 
    <img data-src="http://placekitten.com/g/500/500"> 
    <figcaption>Section 1, slide 3/4</figcaption> 
</figure> 
<figure class="slide"> 
    <img data-src="http://placekitten.com/g/1200/400"> 
    <figcaption>Section 1, slide 4/4</figcaption> 
</figure> 
</section> 

は、今私は2つの小さな問題を抱えていると私はCSSやJavaScriptのコーディングの知識不足持っているので、私は、さらにいずれかを取得することはできません。

1をすべてのスライドの）すべてのfigcaptionsを同じに見えます時間。アクティブなfigcaptionのみを見えるようにすることは可能ですか？

2）画像のラージローディングはそれほど滑らかではありません。フェードインやフェードアウトの効果がありますか？

よろしく、 月

Answer 1

1. それが言う行削除：fixedElements: 'figcaption',を - これは自明である、figcaption要素は、右下の隅に固定されています。
2. CSS img {display: none;}ですべての画像を非表示にし、最初の画像にstyle="display: block;"という属性を付けて、JavaScriptをafterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){var loadedSlide = $(this).find('img');loadedSlide.fadeIn();}で追加することができます。 Reference

あなたはこのcodepen