0

数か月前にこのサイトを作成しましたが、スライダーが機能しなくなりました。停止するような更新をしたことを思い出せません。

主な問題は、一部の画像がスライダーで正しく整列されていないことです。(それらのいくつかは以下にドロップされます): Sign-A-Rama ポートフォリオ サイト

ここに画像の説明を入力 ラウンドアバウトのスライダーが壊れている

この問題を解決するためにあなたの助けを本当に感謝します. – カレブ・メラス

4

1 に答える 1

2

助けてくれてありがとう！

使うように変えました

$(window).load(function() { ... code goes here });

それ以外の

jQuery(document).readyfunction() { ... code ... )};

これにより、jQuery のサイズ変更とアニメーションを適用してカルーセルを作成する前に、すべての画像が確実に読み込まれます。

また、いくつかのデフォルトの CSS スタイルを適用しました

display:none;

そして追加

$('#slider').css("display", "block");

JavaScriptが完全にロードされて準備が整うまで、カルーセルが表示されないようにします。はるかにうまく機能します！

これが非常に困難だった理由の 1 つは、これがレスポンシブ デザインであることです。スライダー全体を JavaScript で読み込むのではなく、DOM を読み込んでから JavaScript を使用して小さな画面のスライダーを削除することにしました。window.load を使用すると、画像が削除される前にほとんどダウンロードされないことが保証されます。

画面サイズが 768px を超える場合は、スライダー スクリプトを読み込み、スライダーの css を「display: block」に変更します。

私が今理解する必要があるのは、画面サイズが変更されたときにページがリロードされないときにそれを機能させる方法だけです。使ってみた

$(window).resize(function() { ... }

しかし、この関数を 1 つのファイルで 2 回使用しようとすると、エラーが発生しました。そこにあるアイデアは大歓迎です！

これが他の誰かに役立つことを願っています!

于 2013-06-22T02:58:46.117 に答える