1. TOP
  2. FIELD JOURNAL
  3. FIELD JOURNAL
  4. MANABI
  5. 左側だけ余白のあるスライダーの実装方法

こんにちわ
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に任意のマージンを指定してください。
freeModetrueにすることで スワイプ時の動きが強さでスクロールされます。
freeModeStickytrueにすると スライドに合わせてスクロールがストップしてくれます。
touchRatioはスワイプ後の遅延を調整できます。お好みで調整してください。
grabCursortrueにするとカーソルが手の掴むアイコンへ変わります。

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

5. まとめ

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

 

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


コーポレートサイト

 

 

 

WRITTEN BY

WRITTEN USER ICON

kitamura

webエンジニア

最近カメラ買いました。猫と川しか撮ってないです。

  • twitter
  • facebook
  • pocket
  • feedly

デザインパートナーを
お探しではありませんか?

フィールドは、グラフィックやウェブの制作を通して、企業の経営戦略をサポートするデザイン会社です。お客様からのご相談に、クリエイティブの力でお応えします。