トップページにJavaScriptなしで動くスライダーを設置しました。

　トップページにJavaScriptなしで動くスライダーを設置しました。どんな感じになったかは、トップページをご覧ください。

どうやって作ったか

　Cryout Serious Sliderから出力されていたスライダー用のHTMLを元に改造したHTMLで基礎を設定し、あとはCSSアニメーションを駆使しました。
　最近は便利になったもので、これだけでトップページにあるスライダーの機能を実装できました。
　さらに細かくしようと思うなら、たぶんJavaScriptがいります。

どんな感じのスライダーか

最初はオートプレイ

　最初はアニメーションで、自動的にスライドが移り変わるようになっています。
　ただし、どれかひとつのスライダーを下のシークバーか矢印から選択して表示した場合、アニメーションは停止します。

ホバリングでアニメーションを停止

　スライダーの上にカーソルを合わせると、アニメーションは停止します。

表示スライダーの選択も可能

　表示スライダーを下のボタン、あるいはスライダー上の矢印から選択することができます。
　ただし、選択した場合、自動的にスライダーが移り変わる状態に戻ることはたぶんないと思います。

スライダーの移り変わりはフェードイン・フェードアウト方式

　opacityを使ったフェードイン・フェードアウト方式です。

オートプレイをスライダー選択後もしない理由

　オートプレイも、手間はかかりますができました。
　しかし、スライダーを選んだなら閲覧するかたがたはそのまま遷移するか、ページを下に移動させるだろうと思ったので、オートプレイを継続させる理由は特になく、このかたちになりました。
　それに伴い、ユーザが選んだスライダーが固定されるようになっています。人それぞれの好みかもしれませんが、こっちのほうがもしかするとユーザビリティ的にはいいかな？　と思い、そこはそのままにしています。というか、CSSだけだとそれ以上はちょっと難しかった…。

その他やり残していること

　こんな感じでスライダー自体は整ったのですが、レスポンシブ対応など、細かいところを設定しきれていません。順次整える予定です。