jQueryで複数枚同時にスライダーをさせたい

質問

色々改造したりしてみたのですが、何ともいかず行き詰ってしまいました。
jQueryを用いたスライダーで、画像のように5枚ずつスクロールをして写真を見せたく、
制作をしているのですが、
スライダー下にある○のナビゲーションも上記と同じように
５つアクティブになるようにするには、どのようにすればよいのでしょうか。

１つだけというものは数多くあると思うのですが、
複数枚となると、このナビゲーション部分はどこにどのように記述すればいいのでしょうか。

すみませんが、どなたかそのようなプラグインまたは記述方法をご存知の方、
ご教授くださいませ。

ちなみに今はこれをベースに使っています。

http://slidesjs.com/

回答No.2

fujillin

#1です。

＞画像の数だけナビゲーションに○ボタンが並ぶといったイメージなのです。
どうしてもそのようにしたいのであれば、自作（又はカスタマイズ）するのがはやみちと思います。

＞５つアクティブになるようにするには、どのようにすればよいのでしょうか。
オリジナルのスクリプトを見ていないのと、質問者様がどのように○を表示しているのかも不明なので、なんとも言えませんが…

ご提示のサイトと同様に、○と●がペアの画像をリストで並べて表示するという方式をとっていると仮定します。
オリジナルの方法はli要素にcurrentクラスを設定することで、CSSを利用して背景画像の表示位置をずらして●が表示されるようにしていますので、スクリプトでの処理としては、対象となるli要素5個に連続してクラス設定をするようにしてあげるだけでよいと思われます。
●の対象となるli要素のスタート位置は、表示する画像のスタート位置と同じでしょうからそれと連動させるようにすればよいでしょう。
オリジナルのものは対象こそ1個ですが、位置を合せるようにする部分は同じはずですので、結局、クラス設定する対象を1個から5個に増やすだけで済みそうです。

＞このナビゲーション部分はどこにどのように記述すればいいのでしょうか。
一番簡単なのは、オリジナルで設定処理をしている部分で、●を1つ設定する代わりに5個分連続して設定してあげればよいはずです。（同時に、●をはずす対象も増えることをお忘れなく）
ただし、この場合○の表示だけ一気に5個分ずれて見えることになりますので、画像の方をアニメーション（スライドなど）させていると、見え方としてあまりシンクロしているように見えない可能性があります。（でも目的は達せられるはず）

質問者様がどのように、画像をスライドさせているのかわかりませんが、「画像を1枚移動し○を一つ移動」という最小単位の処理を作成しておいて、それを5回繰り返すようにすれば多少シンクロした感じになると思います。
（アニメーションの場合は、コールバックで処理する必要があるでしょう）

もう少し凝るのなら、「アニメーション開始時に●を一つ○にして、アニメーション終了時に反対側の○をひとつ●に変える（スライド中は●が4個）」とか「開始時に●を増やして、終了時に●を○に（スライド中は●6個）」みたいにすることで、かなりスムーズに見えるかと思います。
あるいは、○の画像に中間色の●を追加して、スライド中は両端を中間色表示にしておくとか…、半分着色された○の画像（半月型）を追加してそれをアニメーション中の両端の表示にするとか…

回答No.1

fujillin

雰囲気が似てそうなのはこちらでしょうか…（4個ずつですが）
http://www.kys-lab.com/sasaki/lab-js/slider.php

大元はこれらしいです。
http://jqueryfordesigners.com/slider-gallery/

お礼

fujillinさん、ご回答ありがとうございます！

お教えいただいたケースですと、ナビゲーションボタンがスクロールバーになっているので、意図が少し違ってしまいます。
画像の数だけナビゲーションに○ボタンが並ぶといったイメージなのです。

引き続き、どなたかご存知の方いらっしゃいましたら、宜しくお願いいたします。