jQueryのslickスライダーをより簡単に実装する
webサイトのトップページやECサイト等で当たり前のように使われるようになった画像のスライダー。
実装するには色々な方法があります。
どれが簡単で便利かというより、どの方法に慣れているかだと思います。
私も幾つか試してはいますが、今のところjQueryのslickスライダーが一番しっくりきています。
実際、色んな方がこのslickの実装方法をブログにUPしていますが、jQueryを使ったことのない方にとっては分かりやすく書いてるようでそうでもないと感じ、初心に戻って誰でも実装できるよう記載していきたいと思います。
尚、完全初心者向きに細かく書いていきますので、少しイライラするかもしれませんがご了承ください。
作業1：テスト用としてフォルダを作る
これから作成するファイルをわかりやすくまとめるためにフォルダを作成してください。
名前は「slick-slider」とでもしましょう。
何でもそうですが、わからない時はまず真っ新のフォルダと真っ新のファイルを用意し、そこでテスト構築し、うまく自分の物になってから実装した方がミスも少なくなり、自分用のテンプレートとしても保存することができますのでオススメです。
作業2：スライドさせる画像を用意する
スライドさせる画像を4枚用意します。（今回はテストとして4枚スライドさせます）
サイズは幾つでもいいですが、わかりやすく同じサイズの画像を用意しましょう。
画像の名前は何でもいいですが、とりあえず
・slider1.jpg
・slider2.jpg
・slider3.jpg
・slider4.jpg
とし、作業1で作成したslick-sliderフォルダに入れます。
作業3：htmlファイルを作る
真っ新のhtmlファイルを用意し、下記を記述してください。
このファイルを使って記述していきます。
作業4：CDNを使ってjQueryを読み込む記述をする
jQueryの読み込み方は
1：ファイルをダウンロードして読み込む
2：CDN（Content Delivery Network）外部ファイルを読み込む
という2つの方法がありますが、どれをダウンロードして、どこに保存すればいいかといったことも不安要素のひとつになるので、今回は2番のCDN方式を採用します。
では作業3で作成したファイルの<head>と</head>の間に下記を記述してください。
今回記述した4行は、
・上2行が外部のcssを読み込んでください
・下2行が外部のjQueryを読み込んでください
という命令文です。
作業5：htmlを記述する
スライドさせる画像のhtmlを記述します。
今回はul・liを使用します。
記述場所は<body>と</body>の間に下記を記述してください。
ulのクラス名は「slick01」としています。
実際は何でも構いませんが、後でこの名前を記載する箇所がありますので、今回は間違えないよう「slick01」でいきましょう。
（今回はwidth・height・altは省略しています）
作業6：cssを記述する
スライダー全体のサイズと、使用する画像に対するcssを記述します。
今回はテストなので同じhtmlファイルに記述します。
作業4で記述した構文の下（<body>の上）に下記を記述します。
・.slick01のcssは、画面に対して100%としています。
・.slick01 imgのcssは、.slick01に対して100%とし、object-fitを採用しています。
作業7：scriptを記述する
画像をどのようにスライドさせるかの命令文を記述します。
まずはテストとして下記をそのまま記述してください。
記述場所は、</body>の上（</ul>の下）です。
各行の説明も一緒に記載しました。
まずはそのまま記述し、動くことが確認できてから各動作の変更を行ってみてください。
例：autoplaySpeedの1000を4000にしてみる等
これで記述作業は全て終了以上です。
作業8：ファイルを保存してブラウザで確かめる
ファイルに名前をつけて作業1で作成したslick-sliderフォルダに保存してください。
そしてブラウザで立ち上げてみましょう。
下記のようにスライダーが出来上がっているはずです。
いかがでしたか？
うまく実装できましたか？
予備説明
htmlファイル
通常head部分にはtitle他色々記述しなければいけない内容がありますが、今回は省いています。
cssファイル
本来であれば作業6のcssは、htmlファイルとは別にcssファイルとして記述した方がいいと思いますが、今回はファイル1枚で動かせるよう簡単に済ませました。
cssファイルを別で作成する際は、cssを読み込む記述をheaderに追加してください。
画像ファイル保存先
同様に、画像ファイルも本来であればフォルダ内を整理するためにも、imagesフォルダを作成し、その中に入れた方がいいと思いますが、cssファイル同様、今回は1階層で賄えるよう1つのフォルダに全て入れましたのでご了承ください。
script記述
ulのクラス名は作業7で記述したscriptの中の3行目にあります。
ulのクラス名をご自身で変更する場合はこの3行目の「slick01」を任意のクラス名に変更してください。
実際にはこのulだけでなく他にも沢山記述内容があると思います。
ですのでこの scriptはulの下ではなく、</body>の上 です。
現状だと同じ位置だと感じますが、他の構文が入ると位置がわからなくなってしまいますので、必ず </body>の上 と覚えましょう。
全ての記述内容
念のため、今回作業した記述内容をまとめて下記します。
もし動かなかった方は下記を参照してください。
ツイートメニュー
カテゴリー
ツイートタグ
ツイート一覧
