こんにちわ
kitamuraです。

最近よくこんなUI目にしませんか？

左側に余白があって、右側に要素が並ぶやつ…

デザイナーさんからも依頼が多いこちらの仕様
実はちょっとだけ厄介で詰まることが多いかなと思います！

今回は一番手軽に実装できる方法をご紹介したいと思います。

実際に作成したデモがこちら

順番に解説していきます…

1. Swiperの準備

今回はSwiperを使用して実装していきますので
Swiperの準備をします。

SwiperはjQuery非依存で様々なカスタマイズができるスライダープラグインです。
IE対応する場合はバージョン4以下を使用するかpolyfillを使用してください。

CDN

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">

<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

2. HTMLの記述

<!-- Slider container -->
<div class="swiper-container">
    <!-- Slider wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
    </div>
</div>

今回はページネーションなどは実装しないため
Swiperで必要最低限な記述のみとします。

3. CSSの記述

 
.swiper-container {
	padding: 0 20px;//左右の余白はcontainerに指定する 
	
		.swiper-wrapper { 
			padding: 30px 0; 
			
			.swiper-slide {
				// slideに任意の幅と高さ指定
				width: 150px;
				height: 100px;
				
				// 以下見た目調節 
				border-radius: 10px; 
				box-shadow: 0px 3px 15px rgba(0,0,0,0.2); 
				display: flex; 
				align-items: center; 
				justify-content: center;
				
				&:nth-child(1) {
					background-color: #C5D7D9; 
				}
				&:nth-child(2) { 
					background-color: #D9BFA9; 
				}
				&:nth-child(3) { 
					background-color: #F2DFCE; 
				} 
				&:nth-child(4) { 
					background-color: #594F4F;
				} 
				&:nth-child(5) { 
					background-color: #95D9D9;
				}
			}
		}
	}
		

ポイントは.swiper-containerにパディングを指定しているところです！
※.swiper-wrapperに余白を入れても上手く動作しませんのでお気を付けて

今回は.swiper-slideの大きさをCSSでコントロールしているので
.swiper-slide にwidthとheightを入れています。
このあたりは場合によって調整してください。

4. JavaScriptの記述

 var swiper = new Swiper('.swiper-container', {
      slidesPerView: 'auto',
      spaceBetween: 20,
      freeMode: true,
      freeModeSticky: true,
      touchRatio: .03,
      grabCursor: true
    });

slidesPerViewは 今回はCSSでサイズ調整しているのでautoにしてください。
spaceBetweenに任意のマージンを指定してください。
freeModeをtrueにすることで スワイプ時の動きが強さでスクロールされます。
freeModeStickyをtrueにすると スライドに合わせてスクロールがストップしてくれます。
touchRatioはスワイプ後の遅延を調整できます。お好みで調整してください。
grabCursorをtrueにするとカーソルが手の掴むアイコンへ変わります。

その他詳しいオプションの調整などは Swiperの公式サイトで確認できますので
そちらを参照しながら色々試してみてください。

5. まとめ

いかがでしたでしょうか
今回は比較的に簡単に実装できるものを紹介しました。
他にもページネーション やサムネイル表示など色々な工夫ができるかと思います…！
ぜひ色々カスタマイズして使用してみてください。

弊社のコーポレートサイトのトップページの制作実績のスマホ表示などでも
スライダーのサムネイルとして使用してますので
良かったらみてみてください。

コーポレートサイト