0

ページのサイズが変更されると、このスライダーはどのように新しいコンテンツを再読み込みしますか?

http://www.herschelsupply.com/

私はショッピング中にこれに出くわしました.彼らのスライダーは、私が自分のサイトのために作成したいものの良い複製です. ウィンドウのサイズが変更されると、スライダーは特定の時点で新しいコンテンツを読み込みます。私はJSが初めてなので、BxSliderを使用してそれを行うのに問題がありました。

より詳しい情報

私が抱えていた問題は次のとおりです。

  1. css メディア クエリまたは jQuery を使用して特定のスライドを非表示にできますが、それらは DOM に残るため、スライダーは引き続きページャーに表示され、回転が停止したり壊れたりすることがあります。

  2. 異なる幅で読み込まれる 2 つの異なるスライダーを作成すると、ページのサイズが変更されても変更は発生しません。これも無駄に思えます。

  3. $(window).resize() で DOM から要素を削除して置換すると、ウィンドウのサイズが連続的に前後に変更された場合にそれらを DOM に戻す方法がわかりません。

全体として、これを行うためにどのようなアプローチを取るかを尋ねているだけです。これが特定の質問よりも議論に近づいている場合は申し訳ありませんが、他にどこに質問すればよいかわかりません。

4

1 に答える 1

0

あなたが示した Web サイトには、2 つの完全に別個のスライドショーがあります。ウィンドウのサイズが変更されると、1 つは非表示になり、もう 1 つは表示されます。

<div id="slider-one" class="hide-for-mobile">
/*Slider here*/
</div>

<div id="slider-two" class="show-for-mobile">
/*Slider here*/
</div>

次に、モバイルのメディアクエリで...

.hide-for-mobile {
display: none;
}

.show-for-mobile {
display: block;
}

さて、あなたがやろうとしていたことに沿った解決策については...あなたがする必要があるのは、HTML<img>タグから離れることです。代わりに、スライド要素は<div>CSS 背景画像付きの にする必要があります。このようにして、メディア クエリで の背景画像を変更できます<div>。使用しているスライダーがこれをサポートできるかどうかはわかりませんが、実際の HTML<img>タグのスライドに依存しているものもあります。好きなようにスライドできるものもあります。Flexslider で私が説明したことを管理できるはずです (簡単な Google 検索で必要な場所にたどり着きます)。

于 2013-09-18T15:45:27.837 に答える