JSは画面サイズのカルーセルグラフに適応します

クズども · 掲載地 2020/09/25 10:15:17

要件:モバイル端末にアクセスする際、カルーセルチャートは1つのコンテンツのみを表示します。タブレット端末では2つのコンテンツが表示され、PC側では4つのコンテンツを表示します。

まず、レンダリングの下に:

ブートストラップにはグリッドシステムがあり、デバイスのサイズに応じて非常にうまく適応できることがわかっています。原理はCSSのメディアですが、私のカルーセル関数はjsパラメータに従って設定されたSwiperプラグインを使っています。

Swiperは、携帯電話やタブレットなどのモバイルデバイス向けに純粋なJavaScriptで作成されたスワイプ効果プラグインです。

ブートストラップグリッドシステム:

詳細:ハイパーリンクのログインが見えます。

純粋なCSSを使う場合、コードは以下の通りです(私には適用していません):

jsはWindow matchMedia()メソッドで判定され、パラメータが調整・適応されます。コードは以下の通りです:

(終わり)

[JavaScript] JSは画面サイズのカルーセルグラフに適応します