web-dev-qa-db-ja.com

スライダーロードの問題

私はここにある私が開発しているウェブサイトをアップロードしました: http://derbyshiregas.co.uk そしてあなたがホームページが最初にロードするとき見ることができるようにスライダーには表示グリッチがあり、正しくロードする前にすべてのスライドを表示します。これはデスクトップビューでのみ起こるようです。

誰かが見て、私がこれを修正しようとすることができるものを私に知らせてもらえますか?

1
Harvey

これは、据え置きまたはフッターにロードされているJavaScriptの標準的な動作です。

すべてのスライドがロードされ、ページ全体がロードされるまで「スライダーになる」ように指示されません。

あなたは最初にCSSでそれらを隠すことができます:

#section-slider .single-slide-wrap {
    display: none;
}

また、必要に応じて最初のスライドを表示させることもできます。

#section-slider .single-slide-wrap:first-child {
    display: block;
}

同じことがあなたの.tab-paneがページの下の方でも起こっていることに注意してください、それであなたもそれらを追加することができます:

#section-services .tab-pane,
#section-slider .single-slide-wrap {
    display: none;
}

#section-services .tab-pane:first-child,
#section-slider .single-slide-wrap:first-child {
    display: block;
}

CSSはヘッダーにロードされるので、JavaScriptがロードされて開始されるかなり前にスタイルが適用されます。

1
Xhynk