スライドのシステムが1つにしか反映されません

質問

http://nanndabakuroneko.web.fc2.com/test/index1.html
上記のサイトを作っていたのですが、フリックでのスライドが、上の1つにしか反映されていません。
どうしたら他のスライドにも反映させることができるでしょうか？

スライドはこちらのflipsnap.jsを使わせて頂いています。
http://pxgrid.github.io/js-flipsnap/demo.html

また、前回の質問で教えて頂いたこちらのチェックサイトで引っかかった文法ミスを修正したのですが、どうにも動いてもらえず...。
http://www.htmllint.net/html-lint/htmllint.html

余計なデータもくっついてちらかっていてすみません。
どなたかご教授お願い致します。

回答No.1

ixkaito · ベストアンサー

各スライドに別々の id もしくは class を付けて、flipsnapのイニシャライズを別々にしてください。

例）
--------
HTML
--------

<div id="flipsnap1" class="viewport">
<ul class="flipsnap">
<li><p><a href="data/images/a1.gif" rel="lightbox[roadtri]"><img src="data/images/b1.gif" alt="b1" width="480" height="320" /></a></p></li>
<li><p><a href="data/images/a2.gif" rel="lightbox[roadtri]"><img src="data/images/b2.gif" alt="b2" width="480" height="320" /></a></p></li>
<li><p><a href="data/images/a3.gif" rel="lightbox[roadtri]"><img src="data/images/b3.gif" alt="b3" width="480" height="320" /></a></p></li>
<li><p><a href="data/images/a4.gif" rel="lightbox[roadtri]"><img src="data/images/b4.gif" alt="b4" width="480" height="320" /></a></p></li>
<li><p><a href="data/images/a5.gif" rel="lightbox[roadtri]"><img src="data/images/b5.gif" alt="b5" width="480" height="320" /></a></p></li>
</ul>
<div class="pointer">
<span class="current"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div><!-- .pointer -->
</div><!-- .viewport -->

<div id="flipsnap2" class="viewport">
<ul class="flipsnap">
<li><p><a href="data/images/a1.gif" rel="lightbox[roadtri]"><img src="data/images/b1.gif" alt="b1" width="480" height="320" /></a></p></li>
<li><p><a href="data/images/a2.gif" rel="lightbox[roadtri]"><img src="data/images/b2.gif" alt="b2" width="480" height="320" /></a></p></li>
<li><p><a href="data/images/a3.gif" rel="lightbox[roadtri]"><img src="data/images/b3.gif" alt="b3" width="480" height="320" /></a></p></li>
<li><p><a href="data/images/a4.gif" rel="lightbox[roadtri]"><img src="data/images/b4.gif" alt="b4" width="480" height="320" /></a></p></li>
<li><p><a href="data/images/a5.gif" rel="lightbox[roadtri]"><img src="data/images/b5.gif" alt="b5" width="480" height="320" /></a></p></li>
</ul>
<div class="pointer">
<span class="current"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div><!-- .pointer -->
</div><!-- .viewport -->

--------
JavaScript
--------

<script type="text/javascript">
$(function() {
var $pointer1 = $('#flipsnap1 .pointer span');
var flipsnap1 = Flipsnap('#flipsnap1 .flipsnap', {
distance: 480,
transitionDuration: 1000
});
flipsnap1.element.addEventListener('fspointmove', function() {
$pointer1.filter('.current').removeClass('current');
$pointer1.eq(flipsnap1.currentPoint).addClass('current');
}, false);

var $pointer2 = $('#flipsnap2 .pointer span');
var flipsnap2 = Flipsnap('#flipsnap2 .flipsnap', {
distance: 480,
transitionDuration: 1000
});
flipsnap2.element.addEventListener('fspointmove', function() {
$pointer2.filter('.current').removeClass('current');
$pointer2.eq(flipsnap2.currentPoint).addClass('current');
}, false);
});
</script>

お礼

ご回答ありがとうございます。
無事に動きました！
わざわざ例文まで用意して頂いたおかげで、難なく解決することができました。

また問題が起きた際は、ご教授をお願い致します。
丁寧な解説、本当にありがとうございました。