フルページ水平スライダー

Question

私はfullpage.jsとブーツラップを使用しています。

<div class="section fp-auto-height"> 
     <div class="container"> 
      <div class="row"> 
       <div class="heading">header text</div> 
       <div class="slide" id="slide1">Horizontal slider1</div> 
       <div class="slide" id="slide2">Horizontal slider2</div> 
      </div> 
     </div> 
</div> 

任意のアイデアは、なぜそれが働いていない。そのため、自動高さを持っているマイのセクションでは、水平スライダと間違っ代、それがどのtext.Hereがコードで表示されないのだろうか？

Answer 1

required HTML structureに関するfullpage.jsのドキュメントを読んだことがありますか？

スライドの構造は次のようになります。

<div class="section"> 
    <div class="slide"> Slide 1 </div> 
    <div class="slide"> Slide 2 </div> 
    <div class="slide"> Slide 3 </div> 
    <div class="slide"> Slide 4 </div> 
</div> 

そう...

• はあなたのheading要素を削除し、あなたのrow要素
• を削除します。

• container要素を削除してください。

  水平slider1 水平スライダ2

あなたがその特定のセクション内のすべてのスライドのヘッダーをしたい場合は、それはposition:absoluteとposition:relativeセクションを使用する必要があります：

<div class="section fp-auto-height"> 
    <div class="header">Demo</div> 
    <div class="slide" id="slide1">Horizontal slider1</div> 
    <div class="slide" id="slide2">Horizontal slider2</div> 
</div> 

CSSの

.header{ 
    position:absolute; 
    top: 0; 
} 
.section { 
    position:relative; 
} 

Reproduction online