5秒ごとにフェードで切り替わります。右下のボタンで一時停止でき、マウスを乗せている間も止まります。動きを減らす設定の端末では自動で切り替わりません。秒数は JS の 5000 で変えられます。写真の部分は色の面です。<div class="cs-ss01__ph"> を <img class="cs-ss01__ph" src="…" alt="…"> に差し替えてください。
SLIDESHOW
スライドショーのCSS素材
写真やお知らせを順に見せるスライドショーです。外部のライブラリは使っていません。写真の部分は色の面になっているので、画像に差し替えて使ってください。
10種類
左右のボタン・下の丸・キーボードの左右キーで切り替えます。自動では動きません。スライドは cs-ss02__slide の行を足すだけで増やせます（丸も同じ数に）。写真の部分は色の面です。<div class="cs-ss02__ph"> を <img class="cs-ss02__ph" src="…" alt="…"> に差し替えてください。
scroll-snap で、スワイプすると1枚ずつぴたっと止まります。パソコンではトラックパッドの横スクロールか、下のスクロールバーで動かせます。次の1枚が少し見えるので、横に続くことが伝わります。写真の部分は色の面です。<div class="cs-ss03__ph"> を <img class="cs-ss03__ph" src="…" alt="…"> に差し替えてください。
下の小さな写真を押すと大きく表示します。中古車の掲載ページや、施工事例・商品写真に向いています。サムネイルの色の面も同じように <img> に差し替えてください。写真の部分は色の面です。<div class="cs-ss04__ph"> を <img class="cs-ss04__ph" src="…" alt="…"> に差し替えてください。
下から上へ押し上げるように切り替わります。右側に今の番号と全体の数が出ます。4秒ごとに進み、一時停止ボタンで止められます。写真の部分は色の面です。<div class="cs-ss05__ph"> を <img class="cs-ss05__ph" src="…" alt="…"> に差し替えてください。
写真が少しずつ大きくなりながら、次の写真に溶けるように変わります（ケン・バーンズ効果）。トップページの大きな写真に向いています。ズームの大きさは --cs-zoom で変えられます。写真の部分は色の面です。<div class="cs-ss06__ph"> を <img class="cs-ss06__ph" src="…" alt="…"> に差し替えてください。
見えないラジオボタンで切り替えるので、JavaScriptがいりません。キーボードでは、見出しにフォーカスして左右キーで動かせます。同じページに2つ置くときは、name と id・for を別の名前にしてください。写真の部分は色の面です。<div class="cs-ss07__ph"> を <img class="cs-ss07__ph" src="…" alt="…"> に差し替えてください。
上のバーが伸びきると次の1枚に進みます。写真の左半分を押すと前、右半分を押すと次へ。マウスを乗せている間と一時停止中はバーも止まります。1枚の時間は --cs-time で変えられます。写真の部分は色の面です。<div class="cs-ss08__ph"> を <img class="cs-ss08__ph" src="…" alt="…"> に差し替えてください。
真ん中の1枚を大きく、両どなりを小さく薄く見せます。5秒ごとに進み、前後ボタン・一時停止ボタン付きです。真ん中の幅は --cs-w で変えられます（translateX の計算はこの値を使っています）。写真の部分は色の面です。<div class="cs-ss09__ph"> を <img class="cs-ss09__ph" src="…" alt="…"> に差し替えてください。
左の文章と右の写真が組になって切り替わります。写真は右から幕を引くように現れ、文章は下からふわっと出ます。スマホでは写真が上、文章が下に並びます。写真の部分は色の面です。<div class="cs-ss10__ph"> を <img class="cs-ss10__ph" src="…" alt="…"> に差し替えてください。