レスポンシブ対応のカルーセル/スライダーを実装できるjQueryプラグイン「slick」

レスポンシブ対応のカルーセル/スライダーを実装できるjQueryプラグイン「slick」

レスポンシブ対応のカルーセル/スライダーを実装できるjQueryプラグイン「slick」
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加


  • ドメイン無制限・WordPressが使える格安サーバー
  • このエントリーをはてなブックマークに追加

slickは、レスポンシブ対応のカルーセル/スライダーを実装することができるjQueryプラグインです。非常に豊富なオプションも用意されています。

今回は、このslickの実装手順を紹介したいと思います。そんなに難しくないので、ぜひチャレンジしてみてください。

スポンサードリンク

ステップ1. ファイルのダウンロードと設置

slickの公式サイトにアクセスし、「get it now」からファイル一式をダウンロードします。

get it now

zipファイルを解凍したら、以下のフォルダとファイルをサーバー上にアップロードします。

  • fontsフォルダ
  • slick.css
  • slick-theme.css
  • slick.min.js

fontsフォルダとslick-theme.cssは同階層に設置してください。

ステップ2. HTMLのマークアップ

<head>~</head>内で、以下のようにアップしたcssファイルをロードします。

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

続いて、</body>の直前で、以下のようにjQueryとslick本体をロードします。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="js/slick.min.js"></script>

スライドを表示する部分は、以下のように画像をリストで記述します。

<ul class="slide">
<li><img src="images/slide/slide1.png"></li>
<li><img src="images/slide/slide2.png"></li>
<li><img src="images/slide/slide3.png"></li>
<li><img src="images/slide/slide4.png"></li>
<li><img src="images/slide/slide5.png"></li>
</ul>

ステップ3. slickの実行

最後に、</body>の直前に以下を追加して、slickを実行します。

<script>
$(function(){
$('.slide').slick({
autoplay:true,
autoplaySpeed:5000,
dots:true,
pauseOnHover:true
});
});
</script>

「.slide」の部分は、画像を包括しているulに付与したクラスと合わせます。

オプション

代表的なオプションについては、以下の通りです。

autoplay 自動再生
autoplaySpeed 自動再生の間隔
arrows ナビゲーション(矢印)の表示
dots スライド数を示すドットの表示
fade フェードイン・フェードアウトの切り替え効果
infinite ループの有無
pauseOnHover マウスホバーで自動再生を一時停止
pauseOnDotsHover ドットにマウスホバーで自動再生を一時停止

オプションは他にも用意されていますので、詳しくは公式サイトをご参照ください。

あとがき

シンプルなカルーセル/スライダーも個性的なものも、どちらも実装可能なプラグインですね。

サイトに導入するカルーセル/スライダーのプラグインで迷ったら、slickもぜひ検討してみてください。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

One thought on “レスポンシブ対応のカルーセル/スライダーを実装できるjQueryプラグイン「slick」

  1. Pingback: レスポンシブ対応のカルーセル/スライダーを実装できるjQueryプラグイン「slick」 | TechMemo – Temporary index

コメントを残す

メールアドレスが公開されることはありません。