1ページ内に複数のjqueryのスライドショーを設置するにはどうしたらよろしいでしょうか？

http://apoc.jp/jquery-slider-howto/
コチラのサイトを参考にし、タイマーなどによるスライドはなしでクリックのみのスライドショーをしたいと思っております。
サイトの通りに作ると動きはするのですが、1ページ内に複数配置すると、サイトのslideSetWidthという変数の値がページ内の画像すべてで総合計を出してしまい、空白のスライドができてしまったり、ページ内のスライドが全部一斉に動いたりしてしまいます。

スライドごと個別に動くよう、さらに言うと今後写真の差し替えや増減も考慮して、そのたびにjqueryを書き換えるということはしなくても良いようにしたいのですが、どのようにしたらよろしいのでしょうか？

なにとぞよろしくお願いします。

No.1 ベストアンサー 回答者： fujillin 回答日時： 2016/12/05 17:02

こんにちは。

ご提示の参考サイトでは、理解しやすいようにid等を固定のものとして処理するような記述法をとっていますが、複数のセットに対して動作させようとするとそのままではうまくいきません。


例えば、
全体を一般化して、処理対象を一つのセットに対して限定できるようにしておくような記述にすることでも対応可能です。
クリックした要素はどれかのセットに紐づけられた要素なので、そこから要素のラッパーを調べて、常にそのセットに対して処理するといった要領です。

考え方がもう少し複雑になりますが、全体ををオブジェクト化しておいて、それぞれのセットに対して設定するといった方法も考えられます。（よく用いられている方法です）

上記が『何のこっちゃかさっぱりわからん！』というような場合は、同じスクリプトをコピーしておいて、変数名やidが被らないように書き換えるという方法が一番簡単だと思います。
（ただし、セット数が多くなると、その分だけスクリプトも増大します。）


＞slideSetWidthという変数の値がページ内の画像すべてで総合計を出してしまい～
複数セットある場合は、要素選定などの際に、対象の範囲がそのセット内に収まるように注意する必要があります。

例えば
＞slideNum = $('.slide').length;
では、文書内の全てのslideクラスを持つ要素の数を取得していますので、複数セットあれば全体をまとめた数になってしまいます。
多分、個々のセット内のslideクラスの要素数を取得したいはずなので、 例えばラッパーにidがふられていて、それをIDとするなら
　$('#ID .slide').length;
などとすることで、要素の範囲を限定可能ですね。

参考サイトのように各親要素ともslideSetのような同じクラスしかなくて、単純には区別できないというのであれば
　$('.slideSet').each(function(i){
　　　～～
slideNum = $('.slide', $(this)).length;
　　　～～
})
などといった記述にすることでも、それぞれのセット内のslide要素だけを対象にすることができます。

それぞれのセット内で同じクラス名を用いておいた方が、CSSの設定を共有できるなど都合の良いことも多いですが、スクリプトから要素を指定する際には、セレクタを工夫するなどして、適切に対象を選定できるようにしておくことが必要になります。
jQeryでは、CSSセレクタとほぼ同じセレクタ＋αが利用可能ですので、意図する対象が指定できる方法を考えみてください。
http://api.jquery.com/category/selectors/

この回答へのお礼

非常に細かくわかりやすいご回答ありがとうございます。
正直投げる直前でしたがもう少し頑張ってみたいと思います。

お礼日時：2016/12/06 17:49