-
ID:C02l5o さんの質問

jQueryプラグインBxslider.jsについて質問です。

■やりたいこと
対象のスライダーの「戻るボタン」とは別に、対象スライダーのクラス外に同様の「戻るボタン」と同等の機能をつけるにはどのような方法を取るべきか困っております。

■環境
複数のスライダーを用いております。(計6つ)
そのうち5つはスライドショーとしてではなく、ページの概要とその詳細としてスライドを各2枚設定しております。

■詳細の動作
動きとしてはページ内ナビゲーションバーをクリックした際に、複数あるスライダーの内、操作したスライダーを最初のページ(1枚目)に戻したいと考えております。

どなたかお力添えをして頂ければ幸いです。
よろしくお願いします。

みんなの回答 2 件

ID:9PD4/S さんの回答

ご予算はいかほどで?

ID:C02l5o

回答ありがとうございます。
大変失礼ですが、個人サイトでの実装を予定しており予算は今のところ検討しておりません。
もしご存知の方がいらっしゃればご教授いただければと思い、投稿させていただきました。

ID:Y3vkU3 さんの回答

$(’.bxslider01’).bxSlider({
nextSelector: ’#slider-next01’,
prevSelector: ’#slider-prev02’,
});
$(’.bxslider02’).bxSlider({
nextSelector: ’#slider-next03’,
prevSelector: ’#slider-prev04’,
});
こんなんじゃだめなの?試してないけど。

ID:C02l5o

早速の回答ありがとうございます!
仰るとおり、
$(’.bxslider02’).bxSlider({
infiniteLoop: false,
hideControlOnEnd: true,
nextSelector: $("#slider-next03"),
prevSelector: $("#slider-prev04")
});
と記載すると、対象セレクタ(#slider-next03等)のボタンにて制御可能になりました!
ただ、そのナビゲーションバーはそれぞれでクラス名をつけてあげる必要があるかもしれません。
※同一のクラス名の数だけボタンが出現しました。。
引き続き調整してまいります!

ID:C02l5o

追記です。
大変残念ながら、上記の機能は既存の「NEXT」「PREV」ボタンをオリジナルのものに置き換えるものでした。
今回は「NEXT」「PREV」ボタンはそのままで、別途「NEXT」「PREV」ボタンと同様の動きをするボタンを作りたいと考えておりました。

bxslider.jsのappendControls関数内で両方の機能が使用できるように調整できると考えておりますが、そこで躓いている状態です。
改めてどなたかヒントを頂けないでしょうか。
よろしくお願いします。

ID:C02l5o

結論から申し上げますと、無事に実装することができました!
■用いた方法
各スライダーにpagerCustomオプションを付与
それらのボタンリンクを全て「data-slide-index="0"」に設定

■ソース
【JS】
var test_slider = $(’.test_bxslider’).bxSlider({
speed:1000,
captions: true,
infiniteLoop: false,
hideControlOnEnd: true,
pagerCustom:’#test_nav’
});
※複数ある場合は上記を複数作成する

【html】
<ul id="menu-nav">
<li id="test_nav" class="current"><a data-slide-index="0" href="#test">test</a></li>

  • ・・下部リストへ続く
    </ul>
    ■考察
    今回は2ページしかなかった事や、最初のページに戻る動作が欲しかったのでこちらの方法にて対応しました。
    本家サイトのドキュメントや下記サイトが非常に参考になりました。
    zxcvbnmnbvcxz.com/demonstration/slide_in_slide.html

■あとがき
こちらのトピックを御覧頂いた皆様、本当にありがとうございました。
これにてこちらのトピックはクローズとさせて頂きます。

最終更新日:2015-02-27 (4,521 views)

関連するトピックス

ページ上部に戻る