
色々改造したりしてみたのですが、何ともいかず行き詰ってしまいました。
jQueryを用いたスライダーで、画像のように5枚ずつスクロールをして写真を見せたく、
制作をしているのですが、
スライダー下にある○のナビゲーションも上記と同じように
5つアクティブになるようにするには、どのようにすればよいのでしょうか。
1つだけというものは数多くあると思うのですが、
複数枚となると、このナビゲーション部分はどこにどのように記述すればいいのでしょうか。
すみませんが、どなたかそのようなプラグインまたは記述方法をご存知の方、
ご教授くださいませ。
ちなみに今はこれをベースに使っています。
http://slidesjs.com/

A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
#1です。
>画像の数だけナビゲーションに○ボタンが並ぶといったイメージなのです。
どうしてもそのようにしたいのであれば、自作(又はカスタマイズ)するのがはやみちと思います。
>5つアクティブになるようにするには、どのようにすればよいのでしょうか。
オリジナルのスクリプトを見ていないのと、質問者様がどのように○を表示しているのかも不明なので、なんとも言えませんが…
ご提示のサイトと同様に、○と●がペアの画像をリストで並べて表示するという方式をとっていると仮定します。
オリジナルの方法はli要素にcurrentクラスを設定することで、CSSを利用して背景画像の表示位置をずらして●が表示されるようにしていますので、スクリプトでの処理としては、対象となるli要素5個に連続してクラス設定をするようにしてあげるだけでよいと思われます。
●の対象となるli要素のスタート位置は、表示する画像のスタート位置と同じでしょうからそれと連動させるようにすればよいでしょう。
オリジナルのものは対象こそ1個ですが、位置を合せるようにする部分は同じはずですので、結局、クラス設定する対象を1個から5個に増やすだけで済みそうです。
>このナビゲーション部分はどこにどのように記述すればいいのでしょうか。
一番簡単なのは、オリジナルで設定処理をしている部分で、●を1つ設定する代わりに5個分連続して設定してあげればよいはずです。(同時に、●をはずす対象も増えることをお忘れなく)
ただし、この場合○の表示だけ一気に5個分ずれて見えることになりますので、画像の方をアニメーション(スライドなど)させていると、見え方としてあまりシンクロしているように見えない可能性があります。(でも目的は達せられるはず)
質問者様がどのように、画像をスライドさせているのかわかりませんが、「画像を1枚移動し○を一つ移動」という最小単位の処理を作成しておいて、それを5回繰り返すようにすれば多少シンクロした感じになると思います。
(アニメーションの場合は、コールバックで処理する必要があるでしょう)
もう少し凝るのなら、「アニメーション開始時に●を一つ○にして、アニメーション終了時に反対側の○をひとつ●に変える(スライド中は●が4個)」とか「開始時に●を増やして、終了時に●を○に(スライド中は●6個)」みたいにすることで、かなりスムーズに見えるかと思います。
あるいは、○の画像に中間色の●を追加して、スライド中は両端を中間色表示にしておくとか…、半分着色された○の画像(半月型)を追加してそれをアニメーション中の両端の表示にするとか…
No.1
- 回答日時:
雰囲気が似てそうなのはこちらでしょうか…(4個ずつですが)
http://www.kys-lab.com/sasaki/lab-js/slider.php
大元はこれらしいです。
http://jqueryfordesigners.com/slider-gallery/
fujillinさん、ご回答ありがとうございます!
お教えいただいたケースですと、ナビゲーションボタンがスクロールバーになっているので、意図が少し違ってしまいます。
画像の数だけナビゲーションに○ボタンが並ぶといったイメージなのです。
引き続き、どなたかご存知の方いらっしゃいましたら、宜しくお願いいたします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript プラグイン無しでContactform7にdatepickerを実装 3 2022/10/25 02:18
- JavaScript スマホ上で、左右スワイプで次のページに移動させたいです 2 2022/11/11 17:04
- その他(教育・科学・学問) 関数、写像について 1 2022/04/10 23:45
- Windows 10 フォルダ内の全ての画像を矢印キーでスライドできるようにしたい 1 2022/10/21 12:53
- Visual Basic(VBA) エクセルマクロでアニメを作る方法を教えてください。 1 2023/02/07 14:27
- Excel(エクセル) EXCELのグラフを画像(JPG形式)で保存、通常実行がうまく行かない。ステップインはうまく行く 3 2022/08/30 12:06
- 野球 35歳以上の方に質問です。 今年の大谷翔平のスライダー と 全盛時の伊藤智仁のスライダー はどちらが 3 2022/07/24 07:56
- 英語 関係代名詞「非制限用法」が説明する先行詞が無冠詞複数形の場合「一般的総称」と見なすことの可否について 10 2022/07/20 10:19
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- Excel(エクセル) エクセルでファイル保存時に複数シートのオートフィルタを全て解除したい 1 2023/05/10 13:23
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
背景画像の繰り返しについて
-
同じ画像を複数回表示させる
-
UWSC 画像認識で条件分岐
-
gif 画像上の ボタンに リン...
-
【EXCEL VBA】ダブルクリックで...
-
uwscについてです
-
uwscの画像認識の不具合だと思...
-
C# 画像のトリミング処理
-
UWSCの色判定
-
UWSC 画像判定と条件分岐について
-
画像が分割されて切り替わる、...
-
画像の2次元フーリエ変換の結...
-
EXCEL VBA 複数のImageコントロ...
-
HTMLでこの画像を表示したいで...
-
「問題も答えも画像」のクイズ...
-
uwcs のマクロで画像認識をして...
-
Jimdoで画像をポップアップ表示...
-
パネルに画像
-
HTMLです。画像をHTMLで表した...
-
「ご処理進めて頂きますようお...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
背景画像の繰り返しについて
-
EXCEL VBA 複数のImageコントロ...
-
【EXCEL VBA】ダブルクリックで...
-
uwcs のマクロで画像認識をして...
-
UWSCの画像認識と条件分岐につ...
-
UWSCでループ処理がうまくいき...
-
vb.net 画像の透過について
-
「using Windows」でエラーが出る
-
Excel ユーザーフォームで表示...
-
UWSC 画像判定と条件分岐について
-
uwscの画像認識に失敗します。
-
画像のビット数を変更する方法
-
jqueryスライダーを2段でスライ...
-
画像処理したBitmapをピクチャ...
-
UWSCの色判定
-
UWSCについて
-
スマホでサイトの画像を長押し→...
-
VBAのユーザーフォームのイメー...
-
gif 画像上の ボタンに リン...
-
画像のピクセルデータの取得
おすすめ情報