スライド
geralt / Pixabay

 トップページに、JavaScriptなしで動くスライダーを設置しました。
 使用しているWordPressテーマに組み込まれているSerious Slider Plugin用のCSSがスタイルに適用されるように、HTMLタグはSerious Slider Pluginで生成されたものを一部改変して使いました。
 そのほかにもいろいろ工夫しましたので、防備録を書いていきます。

広告

HTMLの構成

 HTMLの構成は大まかに、

  • 一括してスライダーのエリアをラッピングするdiv
  • なるべく上部にinputボタン
  • 下部のlabelとは別に個々のスライダーを纏めるdiv(以下inner-sliderと呼称)
  • 個々のスライダー(imgとリンクをラッピングしたdiv)
    • 個々のスライダーの上にabsoluteで配置されたボタンなど
  • スライダーを纏めるdivの下に、一括してラッピングするdivには含まれるようにして上記inputと連携させたlabel

 となっています。

スライダーを横並びにするのに使ったテクニック

 スライダーを横並びにするのに使ったテクニックは一つ。

  • flexbox(directionはhorizontal)

 です。これをinner-slider(個々のスライダーをまとめているdiv)に適用してスライダーを並べました。
 中央に配置したい一番目のスライダに、order(0)を設定。2番目に表示される予定のスライダ(右)にorder(1)、3番目に表示される予定のスライダ(左)にorder(-1)を設定することで、感覚的にも分かりやすいようにして、位置を調節しました。
 float: leftや、position: absoluteを使ってもいいかなと思ったのですが、それをするとfloatの場合はclearfixがややこしく(また本来の使い方ではたぶんないし、スライダーの位置もチェンジできない)し、positionの場合はHTMLのネスト地獄が発生しそうだったのでflexboxに頼ることにしました。

はみ出る横幅の処理

 これについてはcalcを駆使しました。
 marginにマイナス値が出ることを利用して、calc(50% – inner-sliderの横幅/2)となるようにSCSSで変数を使って設定しています。これで中央のスライダーがページの真ん中に表示されます。

スライダー切り替え時のフェードイン・アウト

 普通にopacityを変化させるようにしています。

オートプレイ中のスライダーの遷移

 これについては、どうやらlinearなどの線形の遷移をさせると、フェードイン・アウトにかぶせてもflexboxが並び替え中の状態であるのが結構見えてしまいました。
 ですから、フェードイン・アウトのアニメーションとflexboxのorder変更アニメーションを分離。
 order変更は一瞬でなされるよう、animation-timing-functionにstep-endを指定して、ぱっと遷移するようにしました。

問題点

 一部ブラウザでkeyframeによるorderの遷移が発生しません。CodePenにてテストしてみたところ、これはどうやらブラウザごとに動作が異なる模様です。

 (以下のスクリプトはPCのChromium系ではdivが移動するが、iOS Safariなどでは移動せずただフェードイン・アウトを繰り返すだけである)

See the Pen Flexbox test by suquiya kirico (@suquiya) on CodePen.

 それだけではあるのですが、しかしその「一部ブラウザ」にどうやらiOS(最新バージョン)のブラウザも含まれるようですので、keyframeにおいてorderを遷移させることができるのが正常な挙動なのかどうかも不明です。
 ですので、そのうちJavaScript(without jQuery)にこの遷移をまかせるコードを書くつもりです。
 がんばったんですが、結局CSS Onlyでその辺の対応は無理だったみたい…とほほ…。

選択されたスライドへの遷移

 一番上のHTMLの大まかな構造にあるように、上方にinputを書いてあります。これはlabelのfor属性によってlabelと連携されており、inputをdisplay: noneにしていても、labelをクリックすればそれに対応するinputが:checkedになります。
 あとはCSSの「~」セレクタ(A ~ Bと書いてあるとき、A以降のBに適用する)を使い、たとえばinput#id:checked ~ labelや、input#id:checked ~ inner-sliderとすることで、「inputがチェックされた(ラベルがクリックされた)状態のときの表示」を指定することができます。
 これを利用しています。

animationで少し引っかかったこと

 遷移前と遷移後で同じ名前のついたkeyframesを使っていると、どうも遷移前の状態が遷移後のアニメーションに影響するみたいです。
 よく考えればそっちのほうがいろいろできることが多そうなので当然かな、と今では思うのですが、当初は気づいておらず、keyframesをあちこち使いまわして引っかかっていました。

その他コメントなど

 まだまだCSSだけでスライド実装は難しそうですが、JavaScript単体でも表現力があがってきているので、ずっと短いコードで実装できるようにはなっているのではないかと思います。
 一時期まではjQueryなど使わなければいろいろと難しく、その名残もあってか、今でもWordPressのスライダープラグインはjQueryが多く、それに頼らないようにしてスピードを上げるためにはちょいちょいコードを書くことになりそうです。JavaScriptもだいぶやりやすくなったみたいであるとはいえ、うう、がんばらねば…。

広告

関連コンテンツと広告

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA