javascript - jQuery スライダーの実装に関する問題

Question

jquery スライダー (flexslider) の実装に問題があります

非常に基本的なものが欠けているように感じますが、何らかの理由で指を置くことができません。どんな助けでも素晴らしいでしょう。テストサイトへのリンクは以下です。

スライダーを空の緑色の領域に表示しようとしています。

私はGumbyレスポンシブフレームワークでも作業しています

score 1 · Accepted Answer

これはあなたの問題です：

 Uncaught TypeError: Object [object Object] has no method 'flexslider'

... また、flexslider ファイルの後に jquery ファイルをロードしているようにも見えます。すべての .js ファイルを 1 か所にまとめ、その上に jquery ファイルを配置してみてください。

同じページに 2 つの jquery ファイルがロードされています。意図的に2つをロードしようとしない限り、必要なのは1つだけです..

スクリプトを配置してみてください...

  $(window).load(function() {
    $('.flexslider').flexslider();
  });

ページの先頭ではなく、本文が終了する前に、スクリプトタグで囲まれたページの下部にあります。とにかくページがロードされるまでスクリプトは待機しています。

アップデート！

おやおや、これまでお疲れ様でした！Web コンソールを介してページで行ったことを確認しています。
そして、それを取り除きたいなら...

Uncaught TypeError: Object [object Object] has no method 'on'

...次に、jquery 1.6.2 ファイルをページの上部から削除し、fexslider.js ファイルをページの下部に配置します。

score 0 · Accepted Answer

を与える#maincontentbodyとheight、おそらく75px、すべての子が定義されている必要がheightありwidthますwidth:100%。min-heightこの場合、は適切な値ではありません

あなたの画像は緑色のバー領域よりもはるかに大きいように見えますが、それもアニメーション化されると思いますか？

score 0 · Accepted Answer

前述のように、jquery ライブラリへの二重参照があります。これを実行すると、二重参照が停止します。

<script type="text/javascript" charset="utf-8">
  $.noConflict();
  $(window).load(function() {
  $('.flexslider').flexslider();
});
</script>

3 に答える 3