スマートフォンサイトに部分的にスワイプを複数設置

スワイプはflipsnap.jsを使い、以下サイトのサンプルの中になる「next, prev」を、
同じページ内に4つ程設置しようとしていますが、最初の1つ目しか動きませんでした。
どうすれば2つ目以降も動かせるでしょうか？
http://hokaccha.github.io/js-flipsnap/demo.html

scriptは以下の物が提示されているのですが、恐らくは「flipsnap」の所を別の物を割り振って、だぶらないようにする必要があるのかな？と思いましたが、どの様に書けば良いのか解りませんでした。
------------
JavaScript
------------
<script>
$(function() {
var flipsnap = Flipsnap('.flipsnap', {
distance: 230
});
var $next = $('.next').click(function() {
flipsnap.toNext();
});
var $prev = $('.prev').click(function() {
flipsnap.toPrev();
});
flipsnap.element.addEventListener('fspointmove', function() {
$next.attr('disabled', !flipsnap.hasNext());
$prev.attr('disabled', !flipsnap.hasPrev());
}, false);
});
</script>

htmlは●の所をそれぞれ変える感じなのでしょうか。
------------
html
------------

<div id="flipsnap●" class="viewport">
<div class="flipsnap">
<div class="item">1-1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
</div>
<div id="flipsnap●" class="viewport">
<div class="flipsnap">
<div class="item">2-1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
</div>

同じものを複数付ける場合はどの様にすれば行えるのでしょうか？
なにか良い方法は無いでしょうか？

宜しくお願いします。

No.2 ベストアンサー 回答者： fufufunofufufu 回答日時： 2016/02/24 14:02

１です。

Flickity
http://flickity.metafizzy.co
とか良さそうでした。ONZEさんで紹介もしていて簡単でした。
http://on-ze.com/archives/2147

あとslick.js
http://kenwheeler.github.io/slick/
デモページで同一クラスで設定しているサイトを見つけたので良いと思います。

どちらも検索すると、日本のクリエイターの人たちのブログなどでも紹介されているので良いと思います。

今回は紹介しましたが、普段から検索して自分に合うものを探して試すという作業もスキルアップの近道だと思いますので、今後は頑張ってみてください。

この回答へのお礼

ありがとうございます。
色々試して頑張ってみます。

お礼日時：2016/02/25 13:30

No.1 回答者： fufufunofufufu 回答日時： 2016/02/23 12:50

こんにちは。

このプラグイン、めんどくさいですね～。
結構古そうなので、今なら同じ挙動でもっと簡単なのもありますよ。

一応本家のデモページ見ましたが、やっぱり一括設定はできないみたいです。
なのでdivで囲んでidを付与します。

--------------------
【HTML】
それぞれにID付与します。
<div id="flip_container1">
　<div class="viewport">
　　<div class="flipsnap">
　　　<div class="item">1</div>
　　　<div class="item">2</div>
　　　<div class="item">3</div>
　　</div>
　</div>
　<p class="controls">
　　<button disabled="" class="prev">prev</button>
　　<button class="next">next</button>
　</p>
</div>

<div id="flip_container2">
　<div class="viewport">
　　<div class="flipsnap">
　　　<div class="item">1</div>
　　　<div class="item">2</div>
　　　<div class="item">3</div>
　　</div>
　</div>
　<p class="controls">
　　<button disabled="" class="prev">prev</button>
　　<button class="next">next</button>
　</p>
</div>


【jQuery】
これも個別で設定します。見てもらえばわかりますが、付与したidをつけたセレクタに書き換えてます。
またそれぞれ$(function(){});で囲っているのは、単純に、まとめて囲むと代入名をそれぞれで考えなきゃいけないのが面倒だったためです。
<script>
$(function(){
var flipsnap = Flipsnap('#flip_container1 .flipsnap', {
distance: 230
});
var $next = $('#flip_container1 .next').click(function() {
flipsnap.toNext();
});
var $prev = $('#flip_container1 .prev').click(function() {
flipsnap.toPrev();
});
flipsnap.element.addEventListener('fspointmove', function() {
$next.attr('disabled', !flipsnap.hasNext());
$prev.attr('disabled', !flipsnap.hasPrev());
}, false);
});

$(function(){
var flipsnap = Flipsnap('#flip_container2 .flipsnap', {
distance: 230
});
var $next = $('#flip_container2 .next').click(function() {
flipsnap.toNext();
});
var $prev = $('#flip_container2 .prev').click(function() {
flipsnap.toPrev();
});
flipsnap.element.addEventListener('fspointmove', function() {
$next.attr('disabled', !flipsnap.hasNext());
$prev.attr('disabled', !flipsnap.hasPrev());
}, false);
});
</script>
--------------------

これでそれぞれ動くと思います。
ただ、やっぱり、本家デモページもそれぞれ全部初期化・オプションも関数を書いていて、無駄が多いなと思いました。
前述したように、フリックで動くスライダープラグインはもっと他にあります。
大体が、オプションなどもこのプラグインのように毎回関数で設定などしなくても、
もっと簡易に呼び出せるように作ってくれていますし、今回のように個別設定しなくても、
同じクラスなら一括で適用できるようになっているものがほとんどです。
数が増えればそれだけ設定用のJSも増えるということなので、検討してみてはいかがでしょうか。

頑張ってください。

この回答へのお礼

ありがとうございます。動きました！
勉強になりました！

フリックさせたい枠が9箇所もあるので、一括で適用できる物が良さそうですね。
もし宜しければ、お薦めのものはありますでしょうか？

お礼日時：2016/02/24 09:22