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

嘿在这里查看此问答

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 回答