BxSliderナビゲーションリンクのスライドを特定のスライドに変更します。

ナビゲーションメニュー項目をクリックすると、BxSliderスライドを特定のスライドに変更します。ナビゲーションアイテムがリストの2番目のアイテムである場合、BxSliderに2番目のスライドを表示させます。BxSliderナビゲーションリンクのスライドを特定のスライドに変更します。

マイナビゲーション構造は次のとおりです。

<html> 
<ul id="pagination" class="clearfix"> 
<li><a href="#">Voter Tools</a></li> 
<li><a href="#">Candidate Tools</a></li> 
<li><a href="#">Ballot Issues</a></li> 
<li><a href="#">Data &amp; Resources</a></li> 
<li><a href="#">Poll Workers</a></li> 
<li><a href="#">Press &amp; Public</a></li> 
<li><a href="#">Links</a></li> 
</ul><!-- /#pagination --> 
</html>

出典

2016-07-20 Chad

あなたがクリックに対してアンカーを設定しようとしているように見えます。私はあなたが持っていることを仮定してい

<ul id="pagination" class="clearfix"> 
<li><a data-slide-index="0" href="#">Voter Tools</a></li> 
<li><a data-slide-index="1" href="#">Candidate Tools</a></li> 
<li><a data-slide-index="2" href="#">Ballot Issues</a></li> 
<li><a data-slide-index="3" href="#">Data &amp; Resources</a></li> 
<li><a data-slide-index="4" href="#">Poll Workers</a></li> 
<li><a data-slide-index="5" href="#">Press &amp; Public</a></li> 
<li><a data-slide-index="6" href="#">Links</a></li> 
</ul><!-- /#pagination -->

：http://bxslider.com/options#pagerCustom

あなたのアンカーはさらに適切に機能するためにデータ・スライド・インデックスが必要になります：私はbxSliderの「pagerCustom」パラメータを検討してお勧めしますクリック可能な要素のコードを提供し、スライドショーの実際のリスト項目は他の場所にあります。あなたがbxSliderのpagerCustomパラメータにあなたのサムネイル/アンカーコンテナ（「#pagination」）のためのセレクタを渡すことができるはず

<ul class="bxslider"> 
    <li><img src="/images/Voter_Tools.jpg" /></li> 
    <li><img src="/images/Candidate_Tools.jpg" /></li> 
    <li><img src="/images/Ballot_Issues.jpg" /></li> 
    <li><img src="/images/Data_and_Resources.jpg" /></li> 
    <li><img src="/images/Poll_Workers.jpg" /></li> 
    <li><img src="/images/Press_and_Public.jpg" /></li> 
    <li><img src="/images/Links.jpg" /></li> 
</ul>

：の線に沿って何か。ライブラリは残りの部分を処理します！

$('.bxslider').bxSlider({ 
    pagerCustom: '#pagination' 
});

フィドル：http://jsfiddle.net/drjeg422/2/ （ご注意：画像は存在しない）

出典

2016-07-20 23:09:08 Hodrobond

BxSliderナビゲーションリンクのスライドを特定のスライドに変更します。

答えて

関連する問題