やっぱりサイトに動きが欲しいということでデザイン変更後トップページに追加したスライダー。
だんだんいろいろなことがサイトでできるようになってきて(いわゆる技術力の向上!?)、今回はプラグインを使わずに、動作が軽いとネット上では評判のSlick.jsというツールを使ったスライダーの設置を試みました。
このスライダー最大の特徴は余白に前後画像がチラ見せできること。どう?かっこよくないですか??ちなみにこの表現がパラメーター(スライダーの設定項目)で実現できそうなのは今回のSlickとSlider-proが代表的なようです。どちらもパラメーターに制限のあるプラグインが配布されており、どこまでできるかがイマイチ分からない有料バージョンもあるようです(1サイト5000円近くしますから複数のサイトで使おうと思ったら・・・ですよね?)。
そこで何とかタダで動かせないかなぁとこれまたネット上で転がってるWordPressでの設定方法を元に見様見真似で機能追加してみたもののあえなく玉砕・・動かん!!ということで一時は無料のプラグインに頼ってめでたしめでたしということにしました。
でもせっかく途中まで手動でやれたんだし、手動設置したらいろいろな機能が使えるのにプラグインだと制限があるし、今後使える機能なのでどうしても使えるようになっておきたいし、何よりできそうでできないの悔しい・・・ということで頑張ってみました。
結果・・・できた~~~👏👏
動きのあるものでは必ずと言っていいほど使われているJavaスクリプト、身近なところではカーナビとかスマホアプリなんかもこのJava(JSと書かれていることもある)が使われています。
しかしながら私はJSについては全くの素人。ハードルはかなり高かったです。
「Uncaught TypeError: $(…).slick is not a function」なる.slickは関数ではないですよ!というエラーが出て動かない、動いたかと思ったら下の画像がすべて表示されないなどなど問題山積、個別に調べるもほとんどが解決に至らず・・・設置できますよ!と紹介しているサイトでは必ずといっていい程このスライダーが設置されていないので多分恐らく何か不具合があって実装に至ってないのでは?と思います。
何でも載ってるインターネットで海外のサイトも含めていろいろと調べ・・・あーやってこーやって・・・うーーん・・・とやってるうちに何をどう読み込んでというのが何となくわかってきて(詳しいことはいまだ不明です)、ようやく問題なく動くようになりました。
トップページにはタイトル下にこれを使ったスライダー、日記のページには右側に猫ちゃんのプロフィールリンクを画像にしたものがスライドして表示されるようになっています。
何かができるようになるって本当にうれしいですね。
このサイトは猫ちゃんのサイトなのでこれ以上詳しくは書きませんが、別サイトでそのうち設置方法を紹介したいと思います。調べるうち同じような現象で挫折している方が多いようですから・・・
※そうそう、トップページのスライダーはスマホでは表示されませんのでパソコンで見てくださいね