0

スライダーがここのドキュメント ページとまったく同じように動作しない理由がわかりません: http://foundation.zurb.com/docs/components/orbit.html

私たちのサイトは ここにあります：

これがコードです。これは最小限のマークアップであり、残りのものは後で追加する必要があると思います。

      <ul data-orbit>
  <li>
    <img src="img/sliders/lightcubebeta1000.png" >
    <div class="orbit-caption">...</div>
  </li>
  <li>
    <img src="img/sliders/hammertime1000.png">
    <div class="orbit-caption">...</div>
  </li>
  <li>
   <img src= "img/sliders/alarmclockbeta1000.png">
    <div class="orbit-caption">...</div>
  </li>
</ul>

Javascript の初期化:

 <!-- Javascript for Orbit Image Slider -->     
<script>
        document.write('<script src=`javascripts/vendor/'
            + ('__proto__' in {} ? 'zepto' : 'jquery')
            + '.js><\/script>')
</script>

<script src= "javascripts/foundation/foundation.js"></script>
<script src= "javascripts/foundation/foundation.dropdown.js"></script>
<script src= "javascripts/foundation/foundation.section.js"></script>
<script src= "javascripts/foundation/foundation.topbar.js"></script>
<script src= "javascripts/foundation/foundation.orbit.js"></script>

<!-- Initialize Foundation -->

<script>

    $(document).foundation('orbit', {
  timer_speed: 10000,
  pause_on_hover: true,
  resume_on_mouseout: true,
  animation_speed: 500,
  bullets: true,
  stack_on_small: true,
  container_class: 'orbit-container',
  stack_on_small_class: 'orbit-stack-on-small',
  next_class: 'orbit-next',
  prev_class: 'orbit-prev',
  timer_container_class: 'orbit-timer',
  timer_paused_class: 'paused',
  timer_progress_class: 'orbit-progress',
  slides_container_class: 'orbit-slides-container',
  bullets_container_class: 'orbit-bullets',
  bullets_active_class: 'active',
  slide_number_class: 'orbit-slide-number',
  caption_class: 'orbit-caption',
  active_slide_class: 'active',
  orbit_transition_class: 'orbit-transitioning'
});

</script>

ドキュメント ページの例をコピーするために最善を尽くしましたが、軌道イメージ スライダーには、すべてのイメージが上から下に黒丸と矢印で一度に表示されます。私は間違いを犯しましたか、それとも Foundation 4 ドキュメントの例に何か問題がありますか?

ありがとう！

4

2 に答える 2

2

Foundation ドキュメントのJavascript インストール セクションに注意深く従わなかったようです。

少なくとも 2 つのステップを逃しました:

  • jQuery が必要です。
  • ファウンデーションを初期化します。

また、質問で提供したコードは、実際のページにあるコードとは異なります。正しい<ul class= "data-orbit">コードが<ul data-orbit>.

すべてが正しく設定されたデモは次のとおりです: http://jsbin.com/ixuluw/3/edit

于 2013-06-21T08:32:53.003 に答える
0

lolmaさん、ありがとうございます。<ul class="data-orbit">バックを <に変更し、次のように変更した後、次のことが判明しましたul data-orbit>。

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

に

<script>
        document.write('<script src=`javascripts/vendor/'
            + ('__proto__' in {} ? 'zepto' : 'jquery')
            + '.js><\/script>')
</script>

その後、オービット スクリプトとともに zepto または jquery を正しくロードしているように見えます。すべての JavaScript ファイルが新しいフォルダーにあるため、変更を見逃したに違いありません。かなり疲れていたのでしょう。再度、感謝します！

于 2013-06-21T18:07:47.513 に答える