4

Foundation 4 フレームワークを使用しています。Orbit スライドを自分の Web サイトに含めようとしましたが、うまくいきません。

そこで、 Foundation のドキュメントの手順に従いました。必要なすべてのスクリプトを含めました

<script type="text/javascript" src="js/vendor/custom.modernizr.js"></script>
<script type="text/javascript" src="js/foundation.min.js"></script>
<script type="text/javascript" src="js/foundation/foundation.orbit.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
       $(document).foundation();
</script>

次に、簡単なスライドショーを追加しようとしました

<ul data-orbit>
       <li>
              Test1
       </li>
       <li>
              Test2
       </li>
       <li>
              Test3
       </li>
</ul>

しかし、スライドショーを生成する代わりに、番号のないリストしか取得できません。スペルミスがないことを確認するためにトリプルチェックしました。これが私が得るものの例です。

4

4 に答える 4

4

私の経験では、財団のスクリプトは少し面倒なので、次のことを試してください。

  1. 中にmodernizrを配置します <head>

  2. タグの<body>直前の末尾で次の js を参照します。</body>

    <script>
  document.write('<script src=' +
  ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
  '.js><\/script>')
</script>
<script src="js/foundation.min.js"></script>
<script>
    $(document).foundation(); 
</script>

このようにして、最新のブラウザに Zepto をロードし、古いブラウザに jquery をロードしてから、Foundation をロードし、ドキュメントにフォーマットを取得するよう指示します。orbit js は Foundation の最小バージョン内にあるため、ロードする必要はありません。

コードはhttp://foundation.zurb.com/docs/javascript.htmlで文書化されています

于 2013-04-10T20:51:39.867 に答える
0

私もこの問題を抱えていました。

ezabaw が使用したprot修正は、私にとってはうまくいきました。

この機能には orbit.js が必要です。

TCasa

于 2013-08-10T17:57:47.090 に答える
0

ダンと TCasa は正しいです。忘れないでくださいfoundation.orbit.js。それは不可欠です。

</body>したがって、これを終了タグの直前に置きます。

<script>
  document.write('<script src=' +
  ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
  '.js><\/script>')
</script>
<script src="js/foundation.js"></script>
<script src="js/foundation.orbit.js"></script>   // <-- Don't forget this one
<script>
    $(document).foundation();
</script>

パスも正しいことを確認してください。Foundation を Compass と組み合わせて使用​​したため、パスは js/foundation/foundation.js および js/foundation/foundation.orbit.js でした。

幸運を

于 2013-08-14T11:00:28.583 に答える
0

もっと簡単な方法があります。ページが完全にロードされた後、Slider を初期化する必要があります。

私にとって、他の回答で前述のすべての手順を実行した後、次のことが機能しました

<script>
    $(document).ready(function() {   $(document).foundation(
    //add custom options to orbit
     'orbit', {
     animation: 'slide',
     timer_speed: 1000,
     pause_on_hover: true,
     animation_speed: 500,
     navigation_arrows: true,
     bullets: true


    );});
</script>

追加のカスタム オプションは、ここにあります。Foundation ドキュメントへのリンク

実際の例はこちらです（この問題の解決に役立ちました）

于 2014-01-19T14:16:45.800 に答える