使い勝手が良さそうなスライダーを発見したのでご紹介です。 とてもシンプルなのですが、いろいろな機能を使うことが出来るので自分なりのスライダーが出来るのではないでしょうか？
jQuery『AGILE Carousel』
上記サイトへ行きますと、5つのサンプルが用意されています。
それぞれのサンプルはこちらから
それぞれのサンプルへ行きますと、コードサンプルが書かれています。
使い方
まず、ダウンロードします。 こちらへいくと、右の方にダウンロードボタンがあると思います。
GitHubで、管理（修正更新してるのかな？）しているため、ダウンロードは、GitHubからとなります。
画面右端にDownloadsがありますので、そこをクリックしていただくと、ZIPファイルがダウンロード出来ます。 となりにあるtar.gzは、Linux用ですのでお間違えなく。
余談ですが、Forkすると、こんな画面。。。！！？？
かわいいですね。
話を戻して、ダウンロードが完了すると、以下のファイルが入っています。
- agile_carousel.alpha.js
- agile_carousel.css
- agile_carousel_data.php
- readme.txt
ここからの手順は、いつもどおりで、HEADER内にファイルを読み込ませ、
HTML
|
1 2 3 |
<link rel="stylesheet" href="agile_carousel.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.js"></script> <script src="agile_carousel/agile_carousel.a1.1.js"></script> |
続けて必須項目を記述します。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script> $.getJSON("agile_carousel/agile_carousel_data.php", function (data) { $(document).ready(function () { $("#basic_slideshow").agile_carousel({ carousel_data: data, carousel_outer_height: 228, carousel_height: 228, slide_height: 230, carousel_outer_width: 480, slide_width: 480, transition_type: "fade", timer: 4000 }); }); }); </script> |
必須項目は、以下のとおり
- carousel_data
- carousel_outer_height
- carousel_height
- slide_height
- carousel_outer_width
- slide_width
表示させたい場所に
HTML
|
1 |
<div id="basic_slideshow"></div> |
と記述すれば、8割は完了しました。
では、あと2割は。。というと、実際に表示させるデータです。 データは、agile_carousel_data.phpへ記述します。
中を見てみますと、以下のように記述されているので、
|
1 2 3 4 |
[{ "content": "<div class='slide_inner'><a class='photo_link' href='#'><img class='photo' src='images/banner_paint.jpg' alt='Paint'></a><a class='caption' href='#'>Sample Carousel Pic Goes Here And The Best Part is that...</a></div>", "content_button": "<div class='thumb'><img src='images/f2_thumb.jpg' alt='bike is nice'></div><p>Agile Carousel Place Holder</p>" }] |
これを自分の環境に合うように書き直せば完了です。
オプションを付け加えてカスタマイズしたりすれば、いろいろと変化が楽しめますね。
Pingback: webサイト作成に関する自分メモ » 高度にカスタマイズ可能なjQueryのカルーセルプラグイン『AGILE Carousel』 | InfinityScope()