手軽に導入出来る！プラグインでスライダー実装【jQuery/slick】

　アニメーションなど動きのあるサイトは、やっぱり見ていても作っていても楽しいものだと思います。やりすぎてしまうとサイト読み込みに時間がかかったり、情報が見づらくなったりしてしまうという懸念点はあるものの・・うまく使えると可愛くおしゃれで華やかで、そして使いやすいサイトになるんですよね。しかし、一から全部プログラムを組むというのはなかなかに大変です。そんなときに大変便利なのが、プラグイン。今回は、画像スライダーを作成する「slick」というプラグインについてご紹介します。

Slickとは

　jQueryで作られているプラグインのひとつで、画像スライダーを簡単に作成することができます。複数枚の画像を効果的に見せたいときに便利です。パソコンやスマホなど、閲覧環境が変わってもレイアウトが崩れないようになっていますし、細かい設定もかんたん。初心者にも優しい画像スライダープラグインだと思います。

簡単な画像スライダーを作成してみる

　まずはHTMLで大枠と画像を準備します。

<div class = "slide-items">
 <li><img src="udon"></li>
 <li><img src="soba"></li>
 <li><img src="ramen"></li>
</div>

「slide-items」という箱の中に、うどん・そば・ラーメンを陳列したようなイメージです。「slide-items」の中に入っている画像が、画像スライダーで表示したい画像たちになります。

　続いて、jQuery側。

$('.slide-items').slick({
 dots: true,
 arrows: false
});

　slickを有効化するのは、たったこれだけの記述でOK。なんなら、dotsやarrowsもオプションです。ここに様々な設定を追加することで、より細かいカスタマイズが可能になります。今回は、スライダー下に表示されるドットを表示し、左右へ移動する矢印を非表示にしました。とにかく簡単にさくっと実装したい人にありがたいシンプルさです。オプションの種類が豊富なので、こだわって作り込みたい人にもオススメ。

　画像スライダーがあると、複数の画像をおしゃれに見やすく表示することが出来ます。HTML側もJavaScript側も非常にシンプルな記述で実装可能なので、とっても便利ですね。本当にこういうプラグインを作ってくださった方々には、感謝しかありません！
　現在コムフォートで開発中の「サブスクプラットフォーム　AppSelect（あぷせ）」でも、slickのプラグインを使用させていただいているところがあります。またいつか詳しくご紹介出来たらと思います！