DAY44.実務でよく使うアニメーションの付け方編 スライダー（カルーセル）

01.スライダーの実装

ライブラリの使い方を覚えてそのライブラリをカスタマイズ出来る

デザインカンプ上にアローボタンやページネーションが
用意されていたら「スライダーで実装する」と判断する
※デザイナーさんに意図を聞く

2枚目以降の画像がない場合、適当に同じようなサイズの仮の画像を入れる

先方が画像を差し替えたらいいだけの状態にして納品

02.扱いやすいスライダー系ライブラリを１つ持つ

スライダーは自作してもいいが、先人の凄い人が作ってくれた
JavaScriptのライブラリを使ったほうが、時間もかからずいい感じに作れる

03.Swiper

1.背景として画像を設置する

.swiper-slide {
　position: relative;
　height: 700px;
　width: 100%;
　background: transparent url(../img/mainvisual.png) no-repeat top center / 　cover;
}

2.装飾はデベロッパーツールを確認しながら上書き

ライブラリの標準デザインから変更する場合は、
ブラウザのデベロッパーツールで該当のCSSの値を確認して上書きする
方法が最も早い

3.アローアイコンは上書きして中央基準で配置

swiper-button-prevクラスとswiper-button-nextクラスを上書きして、
中央基準で配置

「中央から左に◯px」
”left: calc(50% - 600px);”
「中心を起点に位置を決めるテクニック」はよく使われる