1

ページャーは、カルーセル スライドショーで「高度なカスタム テンプレート」を使用して作成されます。

どちらのスライドショーも、ページャーをクリックするまで問題ないように見えますが、奇妙な動作をします。アクティブなスライドの位置が変わりません。ページャーのアイテムをクリックすると、メインのスライドショーに正しいスライドが表示されず、完全に機能しなくなります。

こちらをご覧ください： http://jsfiddle.net/Shmfv/1/


    <div class="boxGaleria cycle-slideshow" data-cycle-slides="> div" data-cycle-fx="scrollHorz" data-cycle-pager-template="<a href='#' ><img src='{{children.0.src}}'><h3>{{children.1.textContent}}</h2><h3>{{children.2.textContent}}</h2></a>" data-cycle-pager=".boxNav">
        <div>...</div>
        <div>...</div>              
        <div>...</div>
    </div>
    <div class="boxNav cycle-slideshow" data-cycle-timeout="1500" data-cycle-fx="carousel" data-cycle-carousel-visible="3" data-allow-wrap="true" data-cycle-carousel-fluid="true" data-cycle-slides="> a"></div>

考え？

4

2 に答える 2

0

ねえ、このQ＆Aをここでチェックしてください

jQuery Cycle2 - カルーセル ページャー ナビゲーション

あなたと同様の方法で問題がありました。

于 2014-01-15T17:07:48.510 に答える
0

最後に回避策を見つけました...プラグインのページャーオプションを使用できず、スクリプトを追加する必要がありました。

// ページャーを埋める

$('.boxGaleria > div').clone().appendTo('.boxNav');

// 両方のスライドショーでアクティブなスライドを更新します

var slideshows = $('.cycle-slideshow').on('cycle-update-view',function(event, opts) {
    slideshows.not(this).cycle('goto', opts.currSlide);
});

// カルーセル/ページャーにクリックを追加します。正しく表示するために、カルーセルが前後にいくつかの重複する子を追加するため、スライド インデックスを修正します

$('.boxNav div').click(function(){
    var index = $('.boxNav').data('cycle.API').getSlideIndex(this);
    var todos = $('.boxGaleria').data('cycle.opts').slideCount;
    slideshows.cycle('goto', (index-todos));
});
于 2013-10-30T12:34:37.710 に答える