0

cycle2 プラグインで動作するように設定しましたが、右クリックして「新しいウィンドウで開く」しない限り、ページャー領域内のリンクが機能しません。提案？

<div class="cycle-slideshow" data-cycle-fx=fade data-cycle-timeout=50000 data-cycle-pager="#no-template-pager" data-cycle-slides="div" data-cycle-pager-template="">
<div id="tab1"><h1>Test Slide One</h1></div>
<div id="tab2"><h1>Test Slide Two</h1></div>
<div id="tab3"><h1>Test Side Three</h1></div>
<div id="tab4"><h1>Test Slide Four</h1></div> 
</div>
<div id="no-template-pager">
<div class="tab1"><p>Lorem ipsum dolor sit amet.</p><p><a href="http://www.google.com">Test Link</a></p> </div>

<div class="tab2"><p>Lorem ipsum dolor sit amet.</p><p><a href="http://www.google.com">Test Link</a></p> </div>

<div class="tab3"><p>Lorem ipsum dolor sit amet.</p><p><a href="http://www.google.com">Test Link</a></p> </div>

<div class="tab4"><p>Lorem ipsum dolor sit amet.</p><p><a href="http://www.google.com">Test Link</a></p> </div>
</div>

フィドルを参照してください。ページャー領域のリンクをクリックしても何も起こらないことに注意してください。ただし、右クリックするとリンクが開きます。

4

2 に答える 2

0

私もcycle2を使用していて同じ問題がありましたが、 data-cyle-pager-eventbubble="true" または私の場合は pagerEventBubble: true を追加することで解決しました。DOM でイベント クリックをバブルし、href を表示して実行できるようにします。

私はjquery 1.9.1を使用しています。コードは次のとおりです。

$(document).ready(function(){
$('.banner-imagem').cycle({
    slides: "li",
    timeout: 0,
    fx: "fadeout",
    speed: 400,
    manualFx: "scrollHorz",
    manualSpeed: 400,
    pager: "#banner-nav",
    pagerTemplate: "#per-slide-template",
    loader: "wait",
    log: false,
    pagerActiveClass: "slide-ativo",
    slideActiveClass: "slide-ativo",
    slideClass: "slide-imagem",
    pagerEventBubble: true
});

});

于 2014-05-21T14:03:02.073 に答える
0

次のように、クリック時にリンクで stopPropagation を使用できます。

jQuery(document).ready(function(){
    $('#no-template-pager a').click(function (event) {
        event.stopPropagation();
    });
});
于 2014-12-30T18:15:06.437 に答える