slick.jsで画像をスライドさせるサイトを表現してみる！

こんにちは！keitaです♪

今回は、「slick.js」というjavascriptの機能を使ってみたいと思います。

「slick.js」は複数の画像をスライド方式で表示させることができる機能です！
画像をたくさん載せたいんだけど、載せすぎると見栄えが～とお悩みの方なんかには便利な機能となるのではないかと思います。

では始めていきます！

作るもの

今回は簡単に春夏秋冬の画像を切り替えていくサイトを作っていきます！
画像はpixabayさんのものを使用させていただきます！

事前準備

公式から必要なものをダウンロードします！
下記のファイルをダウンロードして、プロジェクトフォルダに格納しておきます！

ーーーーーーーーーーーーーーーーー
・fontsフォルダー
・slick-theme.css
・slick.css
・ajax-loader.gif
・slick.min.js

ーーーーーーーーーーーーーーーーー

これで環境はOKです(`･ω･´)b
では作っていきます！！

作成していこう

と思うのですが、ファイルの参照箇所等々が多く複雑になってしまうため、ソースの記載は控えさせていただきます。
こちらにソースがありますので、参照にしてみてください♪
完成形は下記になります( ^^) _U~~

はい！
こんな感じです！
使えるとサイトで表現できる幅が広がって楽しくなるかもしれません。

引っかかった点

画像が真ん中に配置されず、結構な時間を使いました。
調べた結果、「slick-theme.css」内で画像に要素がかかってしまい、真ん中へ配置する「text-align:center」が効かなくなってしまっていたみたいです。。
解決策としてcssの画像要素に「margin:0 auto」を入れてあげれば、真ん中に配置できるようになりました！

ほんとに困ったので、書いておきます～

ここまで読んでいただきありがとうございました！！