Weblasts

サムネイル表示にも対応! CSSだけで作るスライドショー その②

サムネイル付きスライドショー

以前まとめた記事を応用して、スライドショーを改良してみました。
自動で繰り返すし、サムネイルをクリックして画像を切り替えられるようにしてあります

まずはデモから
サムネイルクリックで切り替わります

ラジオボタンを埋め込んだHTMLを作成する

今回のキモは画像を切り替えるためにラジオボタンを使うところにあります
まずはHTMLのサンプルコードから

邪魔にならない場所にラジオボタンを画像分用意

離れた場所に設置したサムネイルをクリックしたときにチェックできるようにするので、ID属性を必ずつける
あらかじめ一枚目に対応したものはchecked属性を付けて選択済みに
表示はCSSの方で消しますが調整中は表示したままのほうがやりやすいと思われる

画像は一つのグループにしておく

今回はdiv要素にしています

サムネイル画像を用意する

サムネイルはlabel要素で囲み、for属性を使って離れた場所に設置したラジオボタンと関連付けする
箇条書きリストとして今回はマークアップしました

見栄えは悪いですがページ上部にラジオボタンが設置されますのでサムネイルクリックでラジオボタンが切り替わることを確認しておきましょう

CSSを書く

CSSに関しては@keyframesとanimationプロパティを軸に設定していきます
他にも細かい調整をしながらコードを書いていきます。
※説明なんかいらねーからコピペさせろという方は自力でスクロールしてください

ラジオボタンを非表示にする

調整中は表示しておいたほうがやりやすいかもですが、消しておきます
単純にdisplayプロパティを使って消してしまいましょう

ここでは簡単なセレクタの指定方法にしていますが、フォーム等を使っている場合は親要素も絡めて指定してください

画像を一か所に重ねる

スライドショーをクロスフェードで作りますのであらかじめ重ね合わせておきます
positionプロパティなどを使うとやりやすいかもしれません

サムネイルの設定

特別難しいことはないですが、横並びにしつつマウスカーソルの表示を変えています

@keyframesでアニメーションを用意する

以前の記事で紹介したものと同じアニメーションを使えますので流用します
詳しいことは以前の記事をご覧ください

今回のコードではサムネイルのクリックでアニメーションを切り替えます。
同じアニメーションを画像と同じ分用意しておくと動きが安定しますので簡単に番号付きで3つ用意しましょう

アニメーションを実行する

animationプロパティでアニメーションを実行していきます。
今回はどのラジオボタンにチェックが入っているかによって動きを変えていくので
「checked疑似クラス」を使ってそれぞれの状況に対応していきます。
まずはページを開いた状態から

要素の後ろにある同じ階層のセレクタの指定指定するため「#img1:checked ~ 同一階層の要素 子要素」の形をとっています。
後はそれぞれの状況によってアニメーションを変えてあげればおしまい

まるっとコピペ用コード

状況によってコードを変える必要もありますし、好みによって微調整をしないといけませんがCSSを丸ごと貼っておきます
上のほうにあるHTMLと組み合わせて試しながら調整してください