今日の学び - slick.jsは神

今日は会社HPにスライダーを埋め込む作業を行いました。

初めは自力でjsファイルの構築を試みたのですが、撃沈。

ぐぐったら高性能で美しいスライダーを発見しました。

それがこちらのslick.jsです。

サイトデザインから既に洗練された印象を受けますよね。とても素敵です。

[超ド級の初心者がやったslick.js実装の手順]

(1) ヘッダーのget it nowをクリックして、Download Nowから圧縮ファイルをダウンロード

(2) 解凍したslick-1.6.0ディレクトリの中を覗く。とりあえずindex.htmlをchromeで開くとサンプルが見られるのでオススメです。ついでにテキストエディタでも閲覧して、どんな風にコードが書かれているか覗きましょう(｀・ω・)b

(3) 以下のファイルを、自分のHP用ディレクトリの最適な場所に分配する(要するにcssファイルならcssディレクトリに、jsファイルならjsディレクトリに...ということです)

・jsファイル: slick-1.6.0/slick/slick.min.js

・cssファイル: slick-1.6.0/slick/slick.css および slick-1.6.0/slick/slick-theme.css

・fontファイル (※どうやらこのfontファイルは、font awesomeのようなもののようです。これをちゃんと入れておくと、スライダーについている矢印も正しく表示できます): slick-1.6.0/slick/fontsディレクトリに入っている4つのファイル全部。

(4) slick-theme.cssファイルの中身を弄る

slick-theme.cssをテキストエディタで開いて、上から17行目までに書いてあるurl('パス')の部分を、先ほど自分で分配したパスに直してあげましょう。こうすることで、ちゃんとそれぞれのファイルが読み込まれます。

(5) htmlファイルに読み込む宣言を書く

ここまでできたら、htmlファイルに「slick.jsを読み込むよー」という宣言をします。

まずはcssファイルから。cssファイルは<head>の中に書きましょう。

パスは適宜変えてください。続いてjsファイル。こちらは</body>の直前に書きます。

<script src="js/slick.min.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
$(document).on('ready', function(){

$('.slider').slick({

});
});
</script>

(6) スライドさせたい写真をhtmlファイルに書き連ねる。

</div>

以上です。これでかっこいいスライダーが実装できます。

みなさんもぜひやってみてください！

Mi in progress