フリック対応カルーセルのjQueryプラグイン「SlidesJS」が、非常に良かった。[jQuery]

フリック対応したカルーセルのjQueryプラグインはそれなりに多いのですが、ループに対応したものは少なかったりします。そこで、SlidesJSを、試したところ結構良かったので、SlidesJSを紹介します。

サイトのほうでは、画像のみですが、プレーンテキスト、リンクなどもOKです。また、自分たちでデザインしたインジケーターの画像、ボタンを使うこともできますので結構自由にレイアウトすることができます。

しかし、SlidesJSを適用しただけでは、意図したデザインで動かないこともあるので、意図したデザインでSlidesJSを使うためのポイントを紹介します。

jquery.slides.jsを少し書き換える

例えば、下記のイメージのようなカルーセルだとします。

HTMLとCSSは、以下のようにします。

JSの指定（HTMLのhead要素内）

<script src="js/jquery.js"></script>
<script src="js/jquery.slides.js"></script>
<script>
$(function(){
  $("#slides").slidesjs({
  	width:320,
  	height: 200,
    navigation: false
  });
});
</script>

基本的には、適用したid名やclass名を指定するだけです。

HTML

<div id="slides">

<div class="frame">
<div class="frame-item-area">
<div class="item-block">
<img src="img/1.png" alt="">
<!-- /item-block --></div>
<p>テキストとか。<a href="#">リンクとか</a></p>
<!-- /frame-item-area --></div>
<!-- /frame --></div>

<div class="frame">
<div class="frame-item-area">
<div class="item-block">
<img src="img/2.png" alt="">
<!-- /item-block --></div>
<p>テキストとか。<a href="#">リンクとか</a></p>
<!-- /frame-item-area --></div>
<!-- /frame --></div>

<div class="frame">
<div class="frame-item-area">
<div class="item-block">
<img src="img/3.png" alt="">
<!-- /item-block --></div>
<p>テキストとか。<a href="#">リンクとか</a></p>
<!-- /frame-item-area --></div>
<!-- /frame --></div>

<div class="frame">
<div class="frame-item-area">
<div class="item-block">
<img src="img/4.png" alt="">
<!-- /item-block --></div>
<p>テキストとか。<a href="#">リンクとか</a></p>
<!-- /frame-item-area --></div>
<!-- /frame --></div>

<div class="frame">
<div class="frame-item-area">
<div class="item-block">
<img src="img/5.png" alt="">
<!-- /item-block --></div>
<p>テキストとか。<a href="#">リンクとか</a></p>
<!-- /frame-item-area --></div>
<!-- /frame --></div>


<!-- ====== インジケーターやボタンのエリア ====== -->
<div id="frame-slide-control" class="slidesjs-navigation">

<div id="slideNav01">
<div id="frame-indicator-area"></div>

<ul class="slidesjs-navigation">
<li class="prev"><a href="#" class="slidesjs-previous slidesjs-navigation"><img src="img/btn_prev.png" alt="前へ"></a></li>
<li class="next"><a href="#" class="slidesjs-next slidesjs-navigation"><img src="img/btn_next.png" alt="次へ"></a></li>
</ul>

<!-- /#slideNav01 --></div>

<!-- /frame-slide-control --></div>

<!-- /slides --></div>

CSS

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.slidesjs-pagination {
	margin: 6px 0 0;
	list-style: none;
	text-align: center;
}
.slidesjs-pagination li {
	display: inline-block;
	margin: 0 5px;
}
.slidesjs-pagination li a {
	display: block;
	width: 10px;
	height: 0;
	padding-top: 10px;
	background-image: url(img/indicator.png);
	background-position: 0 0;
	float: left;
	overflow: hidden;
}
.slidesjs-pagination li a.active {
	background-position: 0 -10px;
}
.frame-item-area {
	text-align: center;
}
#slideNav01 {
	position: relative;
	height: 50px;
	border: 1px solid #DADBEA;
	background: #ECECFB;
}
.prev {
	position: absolute;
	top: 5px;
	left: 0;
}
.next {
	position: absolute;
	top: 5px;
	right: 0;
}
p {
	margin: 0; 
}

デザイン/実装の要点は、以下のようになります。

インジケーターの表示は背景画像として表示
自分たちのデザインしたボタンを使う場合は、オプションに、navigation: falseを指定します。そうしないとデフォルトのスライド送りのリンクが表示されます。
幅、高さは指定します。
指定したid名やclass名の中のコンテンツは非表示になってしまいます。スライド送りのボタンも非表示になってしまい、スライドの対象とされていまいます。スライドの対象外、つまり非表示にならないようにするためには、表示する部分に、slidesjs-navigationというclassを指定します。
スライド送りのボタンのa要素に、前のスライドに送る用に、slidesjs-previous、次のスライドに送る用にslidesjs-nextを指定します。

そして、JSは、2カ所だけ変更が必要となります。変更するのは、以下の部分です。

インジゲーターの表示位置
高さを変更

インジケーターの表示位置

インジケーターは以下のようなHTMLが出力されます。

<ul class="slidesjs-pagination">
<li class="slidesjs-pagination-item"><a href="#" data-slidesjs-item="0" class="active">1</a></li>
<li class="slidesjs-pagination-item"><a href="#" data-slidesjs-item="1">2</a></li>
<li class="slidesjs-pagination-item"><a href="#" data-slidesjs-item="2">3</a></li>
<li class="slidesjs-pagination-item"><a href="#" data-slidesjs-item="3">4</a></li>
<li class="slidesjs-pagination-item"><a href="#" data-slidesjs-item="4">5</a></li>
</ul>

デフォルトのままだと指定したid要素やclass要素内に表示されるだけです。となるとデザイン通りの表示は難しくなりますので、これを表示させたい部分のHTMLのid属性かclass属性に指定します。

Brfore 192行目あたり

        pagination = $("<ul>", {
          "class": "slidesjs-pagination"
        }).appendTo($element);

After

        pagination = $("<ul>", {
          "class": "slidesjs-pagination"
        }).appendTo('#frame-indicator-area');

高さを変更

オプションで高さを指定して、表示するスライド部分の高さを取得するようになっています。これだとiPhoneだとそれほど困らないのですが、幅が端末によって、いろいろ異なる某Androidの端末だとスライド部分と次のコンテンツとの間隔が大きく差がでてしまいます。それを解消するために以下の記述を変更します。

Brfore 239行目あたり

height = (this.options.height / this.options.width) * width;

After

height = this.options.height;

動作確認

以下の、端末で動作確認済みです。

iPhone4 iOS 5.1.1
iPhone5 iOS6.1
Galaxy Nexus Android 4.1

デモ

デモページは、こちらからです。スマートフォンやiPhoneシミュレーターでご確認ください。

E-riverstyle Vanguard