Mi in progress

研究者の道ではなく、エンジニアになることを決意した人のブログ。

今日の学び - slick.jsは神

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

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

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

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

slick - the last carousel you'll ever need

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

 

[超ド級の初心者がやった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>の中に書きましょう。

<link rel="stylesheet" href="css/slick.css">
<link rel="stylesheet" href="css/slick-theme.css">

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

<!-- jQuery読み込み -->

<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>

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

<!-- slick.jsの設定を書いて行く -->
<script type="text/javascript">
$(document).on('ready', function(){

$('.slider').slick({

<!-- ここにいろいろと設定を書きます!-->

});
});
</script>

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

<div class="slider">

<div><img src="img1.png" alt=""></div>

<div><img src="img2.png" alt=""></div>

<div><img src="img3.png" alt=""></div>

</div>

 

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

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