JOURNALMANABI左側だけ余白のあるスライダーの実装方法【swiper.js】MANABI左側だけ余白のあるスライダーの実装方法【swiper.js】2020.09.28|kitamuraWebデザイン学びコーディングCSSJavaScriptこんにちわkitamuraです。実はちょっとだけ厄介で詰まることが多いかなと思います!今回は一番手軽に実装できる方法をご紹介したいと思います。今回はSwiperを使用して実装していきますのでSwiperの準備をします。SwiperはjQuery非依存で様々なカスタマイズができるスライダープラグインです。IE対応する場合はバージョン4以下を使用するかpolyfillを使用してください。</div></div>今回はページネーションなどは実装しないためSwiperで必要最低限な記述のみとします。widthとheightを入れています。このあたりは場合によって調整してください。今回はCSSでサイズ調整しているのでautoにしてください。spaceBetweenに任意のマージンを指定してください。スワイプ時の動きが強さでスクロールされます。スライドに合わせてスクロールがストップしてくれます。touchRatioはスワイプ後の遅延を調整できます。お好みで調整してください。grabCursorをtrueにするとカーソルが手の掴むアイコンへ変わります。Swiperの公式サイトで確認できますのでそちらを参照しながら色々試してみてください。まとめいかがでしたでしょうか今回は比較的に簡単に実装できるものを紹介しました。サムネイル表示など色々な工夫ができるかと思います...!ぜひ色々カスタマイズして使用してみてください。弊社のコーポレートサイトのトップページの制作実績のスマホ表示などでもスライダーのサムネイルとして使用してますので良かったらみてみてください。BYkitamurawebエンジニア最近カメラ買いました。猫と川しか撮ってないです。第1弾!フィールドオリジナルブレンドができるまで。8デザインパートナーをお探しではありませんか?フィールドは、グラフィックやウェブの制作を通して、企業の経営戦略をサポートするデザイン会社です。お客様からのご相談に、クリエイティブの力でお応えします。