touchSliderを復数設置した時

質問

touchSliderというjqueryのプラグインを使用しようと思っています
同ページに復数設置する予定なんですが
例えば3番目のスライダーの次へボタンを押すと
全てのカウントが動いてしまいます

▼設置例
http://mesohoge.web.fc2.com/touchSlider/examples/

▼プラグイン
http://mesohoge.web.fc2.com/touchSlider/jquery.touchSlider.js

$(document).ready(function(){
$('.gallery').touchSlider({
mode: 'index',
center: true,
prevLink: 'a.prev',
nextLink: 'a.next',
single: true,
onChange: function(prev, curr) {
$('.counter').html((curr+1)+'/'+ $('.gallery').get(0).getCount());
},
onStart: function(){
$('.counter').html('1/' + $('.gallery').get(0).getCount());
}
});
});

.counterとなっているので全てのカウントが動いてしまっていると思うのですが
もしプラグインなりを修正して動くようなやり方があれば教えていただきたいです
該当箇所に連番でclassなりidを追加するようにしようとも思ってます

何卒よろしくお願いします！

回答No.2

fujillin · ベストアンサー

セレクタがクラス指定だけなので、全部に反映されてしまうのはご推察の通りでしょう。

APIなどから処理中の要素が取得できれば簡単なのですが、このプラグインはその様には作成されていないのかも。
（thisは自分を返すみたいだし、ドキュメント情報が見つからなかったので不明ですが）

とりあえずの方法として、個別に設定することにすればなんとかなるのではないでしょうか。
ANo1様と同様の発想ですが、jQuery利用なので繰り返し記述する必要はないでしょう。
（classは現状のままで、id等は不要です）

（全角空白は半角に）
$(document).ready(function(){
　$('.gallery').each(function(){
　　var obj = $(this);
　　obj.touchSlider({
　　　mode: 'index',
　　　center: true,
　　　prevLink: 'a.prev',
　　　nextLink: 'a.next',
　　　single: true,
　　　onChange: function(prev, curr) {
　　　　$('.counter', obj).html((curr+1)+'/'+ obj.get(0).getCount());
　　　}
　　});
　});
});

※ start時にはchangeのイベント処理も呼ばれているようなので省略。
※ ご提示のサンプルで要素idが重複しているのは文法違反ですのでご注意。

お礼

無事個別でカウント部分が動くようになりました
細かい部分まで本当にありがとうございます！

回答No.1

ONEONE

連番なりclassなりidなりを追加して見るのが早いですよ。

たとえば、.gallaryと.counterはそれぞれ後ろに連番をふって三回書いてください。
1回目の例は下記です。
htmlも同様に連番を振って記述してください。
それでうまく動くはずです。

$('.gallery1').touchSlider({
mode: 'index',
center: true,
prevLink: 'a.prev',
nextLink: 'a.next',
single: true,
onChange: function(prev, curr) {
$('.counter1').html((curr+1)+'/'+ $('.gallery1').get(0).getCount());
},
onStart: function(){
$('.counter1').html('1/' + $('.gallery1').get(0).getCount());
}
});

お礼

ご回答ありがとうございます！

すいません書き忘れていたのですが
スライダー部分は一つのテンプレートでシステムで
復数表示させている仕様になっていまして
できればひとつのjsで出来ないかなと思ったしだいです

難しいようようでしたら
ONEONEさんのご回答頂いたとおり
jqueryでclassやidを追加してやったほうが早いと思いますので
それで進めていきたいと思っています！