今回はjQuery入門シリーズの10回目でございます！
前回の記事はこちら（´。‐ω‐｀）
【jQuery入門 9】Animateなどを使って様々なアニメーションをつけよう
サンプルでレスポンシブにも対応しているスライダーとカルーセル機能を併せ持った、とーーーーっても便利なプラグイン「slick」を使ってやってみます。
目次
ダウンロード
まずプラグインの公式ページからファイルをダウンロードしてきます。
外部ファイル読み込み
jQuery プラグインの javascript は、jQuery のライブラリを呼び出した後に読み込むようにします！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
[sourcecode lang="html"] <head> ... <link rel="stylesheet" type="text/css" href="css/slick.css"/> <link rel="stylesheet" type="text/css" href="css/slick-theme.css"/> </head> <body> ... コンテンツ ... <!-- jQuery のライブラリを呼び出した後に --> <script src="/js/jquery.min.js"></script> <!-- プラグインの javascript を呼び出す --> <script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js"></script> <script type="text/javascript" src="js/slick.min.js"></script> </body> [/sourcecode] |
html の準備
スライドさせたい要素は div 要素で包括します。
包括した要素をさらに div 要素で包括して、class 属性を与えます。
|
1 2 3 4 5 6 7 |
[sourcecode lang="html"] <div class="hoge"> <div>スライドさせたい要素</div> <div>スライドさせたい要素</div> <div>スライドさせたい要素</div> </div> [/sourcecode] |
Javascript の準備
与えた class 属性の要素に対して、プラグインの関数を実行します。
|
1 2 3 4 5 |
[sourcecode lang="javascript"] $(document).ready(function(){ $('.hoge').slick(); }); [/sourcecode] |
上記をプラグインの javascript の後で読み込むようにします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
[sourcecode lang="html"] <head> ... <link rel="stylesheet" type="text/css" href="css/slick.css"/> <link rel="stylesheet" type="text/css" href="css/slick-theme.css"/> </head> <body> ... コンテンツ ... <!-- jQuery を呼び出した後に --> <script src="/js/jquery.min.js"></script> <!-- プラグインの javascript を呼び出す --> <script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js"></script> <script type="text/javascript" src="js/slick.min.js"></script> <!-- プラグインの javascript の後で読み込む --> <script type="text/javascript"> $(document).ready(function(){ $('.hoge').slick(); }); </script> </body> [/sourcecode] |
カスタマイズ
プラグインの各オプションたるものをオブジェクト形式で設定します。
|
1 2 3 4 5 |
[sourcecode lang="javascript"] $('.hoge').slick({ setting-name: setting-value }); [/sourcecode] |
slick のオプションでは、スライドが切り替わる時間、自動再生するか否か、ナビゲージョンの有無など色々あります。
可能な限り、お好みにカスタマイズしちゃいましょう♪
以上で入門編が完結となります！！！！
長々とおつかれさまでした（*´Д｀）
jQuery入門ガイド
- 【初心者】さくっと見れるjQueryの使い方
- 【jQuery入門 1】超基本！ jQuery のダウンロードと書き方
- 【jQuery入門 2】セレクタって何？要素を取得しよう。基本編
- 【jQuery入門 3】要素を取得しよう。セレクタって何？機能的セレクタ編
- 【jQuery入門 4】イベントって何？on、offを使ってみよう
- 【jQuery入門 5】要素の属性の取得と書き換え
- 【jQuery入門 6】要素の書き換え、追加・削除
- 【jQuery入門 7】CSSの取得・追加・変更をしよう
- 【jQuery入門8】ウィンドウや要素の大きさを取得してみよう。
- 【jQuery入門 9】Animateなどを使って様々なアニメーションをつけよう
- 【jQuery入門 10】プラグインを使ってみよう。
