基本的なフルページ設定が機能していませんか？

私は自分のウェブサイトにfullPage.jsを使用しています。私はそれを試しに行きました、そして、それは、それが想定され、完全な高さのページを作成するように機能していません。スクリプトとリンクを変更したり、さまざまなjQueryライブラリを使用したりしてみました。すべての情報源は100％正確です。すべてのリードや提案？ありがとうございました。基本的なフルページ設定が機能していませんか？

<!DOCTYPE html> 
<html lang="en"> 
    <head> 

     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
     <meta http-equiv="x-ua-compatible" content="ie=edge"> 

    <!-- Bootstrap/CSS --> 
    <link rel="stylesheet" href="css/style.css" type="text/css"> 
    <link rel="stylesheet" type="text/css" href="jquery.fullPage.css" /> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous"> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/jquery.fullPage.js"></script> 


    </head> 
    <body> 

     <div id="fullpage"> <!-- Contains all content that uses FullPage--> 
      <div class="section"> 
       <h1>hello</h1> 
      </div> 
      <div class="section"> 
       <h1>hello</h1> 
      </div> 
      <div class="section"> 
       <h1>hello</h1> 
      </div> 
     </div> 

     <script> 
      $(document).ready(function() { 
       $('#wrapper').fullpage(); 
      }); 
     </script> 


     <!-- jQuery first, then Tether, then Bootstrap JS. --> 

     <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script> 
    </body> 
</html>

出典

2016-11-18 YoungCoder

そして、 "動作しない" とは...？ – Clive

最初にcssファイルを追加してから、jsファイルを追加してください（全ページのCSSと全面ページのjの順番を変更してください）...すべてのjsファイルをbodyタグの末尾に配置するのは問題ありません。例えば。スクリプトとスタイルの順番をここで確認してください：http://demo.w3developer.de/fullpage/ – sinisake

これは、全ページプラグインが使用されていないことを意味していません。@Clive – YoungCoder

ライブラリ:: https://cdnjs.com/libraries/fullPage.js

はそうあなたがスクリプトファイルのsrc属性を変更する必要があります。フルページのsrcを使用しているため、jquery.fullPage.jsですが無効です。

https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/jquery.fullPage.jsをsrc属性に使用します。

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 

 
     <meta charset="utf-8"> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
 
     <meta http-equiv="x-ua-compatible" content="ie=edge"> 
 

 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/jquery.fullPage.js"></script> 
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous"> 
 
     <link rel="stylesheet" href="css/style.css" type="text/css"> 
 
     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/jquery.fullPage.css" /> 
 

 

 
    </head> 
 
    <body> 
 

 
     <div id="wrapper"> <!-- Contains all content that uses FullPage--> 
 
      <div class="section"> 
 
       <h1>hello</h1> 
 
      </div> 
 
      <div class="section"> 
 
       <h1>hello</h1> 
 
      </div> 
 
      <div class="section"> 
 
       <h1>hello</h1> 
 
      </div> 
 
     </div> 
 

 
     <script> 
 
      $(document).ready(function() { 
 
       $('#wrapper').fullpage(); 
 
      }); 
 
     </script> 
 

 

 
     <!-- jQuery first, then Tether, then Bootstrap JS. --> 
 

 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script> 
 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script> 
 
    </body> 
 
</html>

出典

2016-11-18 21:35:00 Mahi

これはまだ動作しませんでした。 JSの前に最初にCSSを追加しましたが、それでも全ページ設定作業はありません。 – YoungCoder

@YoungCoderが更新されました。それは私の仕事です。 – Mahi

ありがとうございます@Mahi私は将来この問題に遭遇した場合でも尋ねる必要があります。私の問題はスクリプト/リンクの順序が間違っていましたか？再度、感謝します。 – YoungCoder

-1

変更id="wrapper"デフォルトの構造

id="fullpage"には、以下のようになります。

<div id="fullpage"> 
    <div class="section">Some section</div> 
    <div class="section"> 
     <div class="slide"> Slide 1 </div> 
     <div class="slide"> Slide 2 </div> 
     <div class="slide"> Slide 3 </div> 
    </div> 
    <div class="section">Some section</div> 
    <div class="section">Some section</div> 
</div>

出典

2016-11-18 21:40:11

これは正しくありません。ラッパー要素に必要な任意の要素ID名を渡すことができます。これは彼の問題の原因ではありません。 – Korgrue

私はgithubで読んだものから好きな要素IDを使うことができると信じています。しかし、私はこれを試して、それは動作しませんでした。 – YoungCoder

できます。最後に作成したサイトでfullpage.jsを使用しました。ラッパーとして使用する要素（本文を除く）を与えることができます。 – Korgrue

基本的なフルページ設定が機能していませんか？

答えて

関連する問題