スマホサイトで写真をスワイプで送るようなギャラリーを実装しようと
色々と探し回ってて見つけたのがこの「Owl Carousel」。

配布元サイト（GitHub）

例の如くJQueryありきのスクリプトなのでそれもお忘れなく。
GitHubは慣れないと「どっからダウンロードするんじゃあ」とか
「ZIPで配らんかい」となりがちですが、配布ページに行って
スクリプトの個別ページに飛び、そこの上記タブの「Releases」をクリックすれば
zipファイルのリンクがあるので参考までに。

このOwl Carouselは実装も簡単ですし、レスポンシブデザインに対応しており
それに伴ったパラメータも多数用意されてるのが嬉しいです。

ちなみに対応するjQueryのバージョンは1.7以上です。

<link rel="stylesheet" href="css/owl.carousel.css">
<link rel="stylesheet" href="css/owl.theme.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/owl.carousel.js"></script>

とこんな感じでheadの所にリンクしてあげて

<script>
$(function(){
    $('.owl-carousel').owlCarousel();
});
</script>

と、スライダー部分のセレクタを指定してあげればOKです。
このセレクタ内の要素はなんでもうまく処理してくれるのもうれしい所。
それこそpだろうがdivだろうがulリストでもなんでもカルーセルスライダーに！

<div class="owl-carousel">
<p><img src="./img/001.jpg" title="hoge"></p>
<p><img src="./img/002.jpg" title="hoge"></p>
<p><img src="./img/003.jpg" title="hoge"></p>
</div>

オプションもとてもたくさん用意されており

<script>
$(function(){
    $('.owl-carousel').owlCarousel({
        slideSpeed  : 200,
            // スライドのスピードを設定します。ミリ秒指定。
        responsive: true,
            // レスポンシブかどうかをtrue,falseで指定します。デフォルトはfalse(レスポンシブはオフ）。
        items : 3,
            // 表示させる要素の数を指定します。3にすれば3つ表示。
    });
});
</script>

と書いてあげればOKです。
詳しいオプションの日本語説明はこちらのAscii.jpさんの記事を参照。

この手のスクリプトは同一ページ内に複数設置すると大抵動作しなかったりしますが
こいつは何の問題もありませんでした。
iOSでもAndroidでもPCでも動くコイツはなかなかニクいヤツです(笑)

最初、検索するときに「スライダー」「スワイプ」などで検索してましたが
これって「カルーセル」って言うんですね・・・・
「回転木馬」を意味するらしいですが、自分のようなおっさんだとやっぱり
「カルーセル」といえば「麻紀」なもんで(笑)

それにしても今やjQueryはもはや必須となりつつあるライブラリですね。
とりあえず何はなくともリンクしとけば間違いない気がします。
昔みたいに「Javascriptオフにしてる人対策」なんてのはもう気にしないでいいのかも。