0

jQuery サイクル スライダーは正常に動作していますが、必要なページャーは別の場所に分割されています。ページング自体は機能しますが、アクティブなスライドは各 div で同じです。つまり、最初のスライドでは、各 div の最初のページャーがアクティブとして表示されます。この問題の解き方が分からなくて困っています！

私が達成しようとしているものの例は、このサイトhttp://www.cote-carmes.com/en-en/rooms.phpのページングです。

マークアップの考え方は次のとおりです。

<div id="home-content">
<div class="home-sub first">
   <ul class="slide-nav">
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
   </ul>
</div>

<div class="home-sub">
   <ul class="slide-nav">
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
   </ul>
</div>

<div class="home-sub">
   <ul class="slide-nav">
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
   </ul>
</div>
</div>

そして、私が持っているjQueryは次のとおりです。

$('#home-slider').cycle({
        pager:  '#home-content ul', 
        pagerAnchorBuilder: function(idx, slide) { 
            // return selector string for existing anchor 
            return '#home-content li:eq(' + idx + ') a'; 
        }

    });

助けてください！

4

1 に答える 1

1

クリス、

私はそれを割ったと思います。

jquery.malsup.com/cycle/pager3.html に基づくこのデモを参照してください。

これは私がしたことです：

  • ページャー ul を 2 つの個別の ul に分割します。
  • 呼び出しの pagerAnchorBuilder オプションを次のように変更.cycle()して、各 ul の最初のリンクのみをアクティブなページャーにしました。
  • 2 つの ul のアンカー枠に異なる色を付け (異なる ul を示すため)、アクティブなページャー リンクにマウスオーバー効果を与える css を追加しました。

Javascript:

$('#slideshow').cycle({
    fx:     'turnDown',
    speed:  'fast',
    timeout: 0,
    pager:  '#nav',
    pagerAnchorBuilder: function(idx, slide) {
        var selector = '#nav li:eq(' + (idx) + ')';//li selector
        var $li = $(selector).filter(function() {
            return $(this).index() == 0;//accept only the first li in its ul
        });
        if( $li.length > 0 ) {
            $li.find('a').addClass('pager');
            return selector + ' a';//anchor selector
        }
    }
});

これはまさにあなたが望むものではないかもしれませんが、それはあなたに道を譲るはずです.

編集

あなたのフィドルから始めて、私はこれで終わった：

$('#home-slider').cycle({
    pager: '#home-content',
    pagerAnchorBuilder: function(idx, slide) {
        return '#home-content li:eq(' + idx + ') a';
    },
    updateActivePagerLink: function(containerID, idx, cl) {
        $lis = $('#home-content li').removeClass(cl).eq(idx).addClass(cl);
    }
});

ノート ：

  • HTML では、<div class="home-sub">ラッパーが削除されました - 不要です。
  • サイクルpagerオプションが からpager: '#home-content ul'に変更されましたpager: '#home-content'
  • 追加されたサイクルupdateActivePagerLinkオプション - カスタム ハイライト効果を与える

デモ

于 2012-09-25T05:37:19.623 に答える