【コピペOK】スマフォだけスライダー表示する方法

どうも。シャオです。

今回はスマフォだけスライダー(カルーセル)を表示する方法を紹介します。

デザインでPCは横並び、スマフォでは一枚表示(スライダー)の場合の実装(コーディング)に使用できます。

UI/UXを意識したデザインをしたい。

スライダーのレスポンシブコーディングで困った。。

そんな方にオススメの記事になっています。

実装コード

以下が実装するためのコードです。

そのままコードを利用するには、jQueryとSwiperの読み込みをお願いします。

PCで閲覧中の方はCodePenをクリックするとPC表示になります。

CSSについてはデザインカンプに合わせて、スライダーの挙動についてはお好みで調整してくださいね。

余談ですが、

今回のスライダーでは問題なかったですが、無限スライダーのような実装だと最新版のSwiper(ダウンロード、CDN共に)だと挙動がおかしくなるんですよね、、

修正されることを切に願います！！

この記事がデザインのUI/UXの向上、スライダーのレスポンシブコーディングの解決になったら嬉しいです。

それでは、また。