Tiny Carousel [plug-in] [jQuery]

html

<div id="slider">
    <span class="buttons prev">&lt;</span>
    <div class="viewport">
        <ul class="overview">
        <li><img src="画像パス" alt="画像の内容"></li>
        <li><img src="画像パス" alt="画像の内容"></li>
        <li><img src="画像パス" alt="画像の内容"></li>
        </ul>
    </div>
    <span class="buttons next">&gt;</span>
    <ul class="bullets">
    <li data-slide="0" class="bullet active">1</li>
    <li data-slide="1" class="bullet">2</li>
    <li data-slide="2" class="bullet">3</li>
    </ul>
</div>

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

1. Tiny Carouselを設置したい場所に、id[slider]を用意（タグ・id名は任意・・・classでもよい）
2. 3～9行目：id[slider]の子要素としてclass[viewport]を設置（タグは任意・クラス名固定）
3. class[viewport]の子要素としてclass[overview]を設置（タグは任意・クラス名固定）
4. class[overview]にスライド表示したい画像を必要な分だけ設置（ここではリストタグで設置しているが、class[overview]のタグをdivタグにして、imgタグを直接列挙しても動作には問題ない）
5. 2行目/10行目：手動で画像をスライドさせたい場合は、そのためのボタンclass[buttons]を設置し、前の画像に戻るボタンにはclass[prev]、次の画像に遷移するボタンにはclass[next]を設定（タグは任意・クラス名固定）
6. 11～15行目：何枚目かの画像か（ページャー）を表示させたい場合は、class[bullets]を設置（タグ・class名は任意・・・idでもよい）。
   その子要素として画像の枚数分だけ、class[bullet]を用意（タグは任意・クラス名固定）。テキストで何枚目かを表示させたい場合は、1からの連番をふる。data属性（独自属性）[data-slide]も設定。
   なお、data属性（独自属性）[data-slide]は0から連番をふる（つまり、テキストが1ならdata-slideの値は0）。
7. たとえば、1枚目から表示させたい場合、最初のclass[bullet]にclass[active]（クラス名固定）を追加しておく（現在表示中の画像がどれかわかりやすくするためのclassなので、不要であれば入れなくてもよい。また、Tiny Carouselが動作を始めると、このclass[active]は自動で削除され、次の画像に対応するclass[bullet]に挿入される）。

• クラス名固定としたclass名は、Tiny CarouselのjQuery（js）コードにて予約されているので、それを使ってください。
• jQuery（js）をある程度理解しているならば、任意のclass名をつけて、Tiny Carouselのコードをカスタマイズするなどできると思うので、ライセンスにて許容されている範囲内で適当に対処してください。
• このサンプルでは、ページャーを手入力にてあらかじめ設置していますが、分かる人はjsなどを使ってカルーセル表示させる画像（コンテンツ）の数に合わせて自動で設定するように工夫してもよいと思います。

css

#slider { height: 1%; overflow: hidden; padding: 0; width: 604px; margin:0 auto; position:relative; }
#slider .disable { visibility: hidden; } /* 必須 */
#slider .viewport { width: 604px; height: 404px; overflow: hidden; position: relative; } /* 必須 */
#slider .overview { list-style: none; position: absolute; padding: 0; margin: 0; width: 240px; left: 0; top: 0; } /* 必須 */
#slider .overview li { float: left; margin: 0; padding: 1px; height: 400px; border: 1px solid #dcdcdc; width: 600px; }
#slider .buttons { /* 遷移ボタン使用の際は必須 */
    position:absolute;
    top:420px;
    left:0;
    background: #aaa;
    display: block;
    width: 35px;
    height: 35px;
    color: #fff;
    font-weight: bold;
    text-align: center;
    line-height: 35px;
    text-decoration: none;
    font-size: 22px;
    cursor:pointer;
}
#slider .next { /* 遷移ボタン使用の際は必須 */
left:auto;
    right:0;
}
#slider .buttons:hover {
    background:#999;
    color:#fff;
}
#slider .bullets{ /* 遷移ボタン使用の際は必須 */
    text-align:center;
}
#slider .bullets li{
    display:inline-block;
    margin:0 4px;
    background:#ccc;
    color:#333;
    text-align:center;
    height: 35px;
    width:30px;
    line-height: 35px;
    text-decoration:none;
    cursor:pointer;
}
#slider .bullets li:hover,
#slider .bullets li.active{
    background:#999;
    color:#fff;
}

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

ここで示したcssはあくまで例なので、適宜設定してください。
ちなみに、このcssはTiny Carouselにパッケージされていたcssファイルのソースをコピペして、カスタマイズしました。

js

$(function() {
    $('#slider').tinycarousel({
        bullets  : true
    });
});

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

1. 基本的には
   $('#slider').tinycarousel();
   だけで動作する。セレクター（このサンプルでは#slider）は任意なので、htmlでTiny Carouselを設置した際に指定したid名（class名など）を指定する。
2. 3行目のbulletsはページャーを有効にするためのオプション。
   ページャーはデフォルトでfalseになっているので、trueにして有効にする。

• オプションは，（カンマ）で区切って複数指定することができます。
  たとえば、axisというオプションにyという値（yは文字なのでクォーテーションで囲む必要あり）を与えると、デフォルト水平方向に移動するカルーセルを垂直方向に変更できます。
• オプションについては、提供元ページ（2015/10現在ページの下の方にConstructorとして記述あり）や下記参考ページを参照してください。