スライダーのために色々奮闘したのでそのまとめ

スライド
geralt / Pixabay

 コンテンツのレンダリングをブロックするスクリプトを排除するためにjQueryを遅延させたところ、トップページのスライダーが動かなくなりました。
 といっても自動遷移だけですが、その辺色々奮闘したので、以下防備録もかねてまとめて起きます。

広告

スライダーがjQueryを使っていた+スライダーはインラインスクリプトを挿入

 これに尽きます。つまり、jQueryを遅延させたことにより、インラインスクリプトをスライダーさんが読み込まなくなったのです。

jQuery非依存のスライダーを使う

 Swiperを試しましたが、いかんせんPageSpeed Insightsの結果は悪化しました。
 あきらめて別の手段に。

別のスライダープラグインを使う

 Meta SliderとSmart Slider 3をためしましたが、とても使いづらかったのでやめました。
 Serious Sliderプラグインは単純なプラグインですが、そのありがたさがよくわかりました…。
 Meta Sliderは色々と謎でしたし、Smart Slider 3は重かったように思います。あと、どうしても使い慣れませんでした。HTMLを直接編集できる形式のSerious Sliderは、私のようにHTML+CSSのコーディングに慣れている者にはちょうどよかったのだと思います。

インラインスクリプトを外部JSに

 いかんせん動きませんでした。orz

現在検討している方策

フロントページのみjQueryを遅延させない

 前に書いたfunctions.phpのコードがあるのでたぶんいけると思います。
 ただ、これだとトップページのスコアが下がるので要検討です。

HTMLのみを再利用し、CSSのみのスライダーにする

 今のところこれを検討しています。
 しかし、CSSのみのスライダーというものは、フェードイン・フェードアウトならいくつかあるのですが、スライドイン・スライドアウトのものはあまり見つからず、やっと見つけたリンクを以下にはっておきます。

 あと、CSSアニメーションに関するページも見つけたのでめもがてらぺたり。


 これらのテクニックを組み合わせて、どうにかスライダーを構築できないかと考えているところです。

広告

コメントを残す

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

CAPTCHA