[jquery]slick.jsを使ってスライダーを作ってみよう

今回は、スライダーを作ってみようと思います。ホームページにはトップページにスライダーがあるホームページがやはり多いですよね。そんな幅広く使えわれているスライダーを作っていきます。作り方は非常にシンプルで、slick.jsを使用して作ってみようと思います。

スライダーを作るHTMLを用意しよう

まずは、slick.jsを読み込んでください。
読み込むものは次の通りです。

• slick-theme.css
• slick.css
• slick-min.js

上記の３つを読み込めば、準備完了です。
HTMLを準備していきましょう。

<div class="sample_slider">
 <img src="画像のURL">
 <img src="画像のURL">
</div>

上記のように、divのなかに画像を読み込むように記述するだけでスライダーを作る準備するは完了します。

slick.jsを使ってスライダーにしてみよう

slick.jsをつかってスライダーを作ってみようと思います。

次のようなスクリプトを記述します。

<script>
 $(function(){
   $('.sample_slider').slick({
     dots:true,
   });
 });
</script>

上記のjqueryだけでスライダーとして機能します。

また、スライダーの画像を移動させるための矢印が最初はみ出ているのでcssで調整してみましょう。

<style>
.sample_slider{width:100%;}
.sample_slider .slick-prev{left:20px;}
.sample_slider .slick-next{right:20px;}
.sample_slider .slick-arrow{z-index:10;}
</style>

上記のように、戻るボタンと進むボタンの位置を調整してブロックのうえに来るようにしましょう。

slick.jsを使ってスライダーを作ってみたサンプル実装例

上記のように素敵なスライダーが出来上がりましたね。

まとめ

slick.jsを使ってスライダーの作り方を紹介させていただきました。

ホームページのトップページなどにスライダーがあるだけで見栄えが良いものになりますね。またコンテンツを１ブロックで複数打ちだせるというもの利点です。スライダーの作り方がわからないというかたのお力になれれば幸いです。