スライダーのプラグイン、slick,以前も使用したことがあったので、「まあ、ファイル入れて、コードはコピペでいいっしょ！」
と思っていたのだけれど、動かない！！
ということでこの機会にじっくり学びながら解決した部分をメモがてら記していきます。
Slick
slickの説明はたくさん探せばあるのですが、必要なものは上記のサイトからファイルをダンロードするか、CDNのコードを記述するのでOK。
やるべきことは
- htmlにjqueryを入れる
- slickのリンクを記述する
- jsファイルにコードを記述する
- htmlに画像を複数枚表示されるように記述（書き方はいろいろですがul・liタグで書くのが多いかと思います）
- デフォルトのままでも大丈夫ですが、見た目の変更を（下のドットや矢印を変更したい場合など）cssを書く（slick内のmin.cssはいじらない）
文字で書くとちょっとわかりにくいかもしれませんね。
slickの導入でハマったところ
slick、実装し終わると、「な〜〜〜んだ！」が多かったのですが、コピペで済ませていた時は何も考えていなかったので、今回改めて、詳しく調べました。ハマったところを抜粋します。
画像がリプレイされない
ドットをぽちぽちやると、画像は動くのだけれど、自動でスライダーされない！！
そんな時は
autoplay:true を書きましょう。
そしてスピードの指定はお好みで。あまり早すぎると、画像をじっくり見るタイミングがないので個人的には3~4秒がいいのでは？？と思います。（遅すぎても他の画像を見てもらえない）
私はなぜか、リプレイリプレイ、、と思ってautoplayをautoreplayと書いていたのです、この書き間違い（よくあるのかわからないけど）注意です。
ちなみにdotsは画像下部分に表示されるドットのことです。表示したくないときはfalseにします。
矢印マークが出てこない、、
この左右のマーク、実はデフォルトだと、存在するのに見えないのです！
矢印マークいらないよ！って人は、写真の幅や色によっては見えてしまうので
arrows:false にしてください。
そうではなく、矢印、見せたいんだけど、でも見えないんだけど、、！？って場合
arrows: true
にしているにも関わらず見えない。
検証ツールでも存在は確認できるのだけれど見えない！理由としては
- 画像はばの枠外にデフォルトでは設置されているので画像がギリギリまで表示されている場合、rightとleftの位置を変更（デフォルトでは-25px)
- デフォルトでは矢印が白色指定されている。なので画像によっては見えない
- 画像の下に矢印が配置されてしまっている
以上の原因の場合、cssにこのような記述をすると上の部分の写真のように色のついた矢印が現れます。
こんな感じで（数値はお任せ）
そして、いろんなサイトを調べたのですが!important の記述がなかったのですが、私の場合は!important無いと表示されなかったので記述しています。別でLP作った時は!important要らなかったので、ここが最後の最後にハマりました。
まとめ
コピペで終わらせていると、あとで痛い目を見てしまう。ということでした。
例えば、動けばいい、くらいの個人のサイトを作る時でもある程度理解しておかないと見た目部分を修正したかったりした時に、理解してないとどこをいじっていいものやら、、、ってなります。
なのでどうせ実装するのであれば、これは何を意味するのか、、？をよく使う部分だけでも理解しておくのって大事だな、、と思いました。
