带有轮播寻呼机的 Cycle2 幻灯片无法正常工作答案

【问题标题】：Cycle2 slideshow with carousel pager not working带有轮播寻呼机的 Cycle2 幻灯片无法正常工作
【发布时间】：2014-01-16 01:07:48
【问题描述】：

寻呼机是使用轮播幻灯片上的“高级自定义模板”构建的。

在我单击寻呼机之前，两个幻灯片看起来都不错，然后它的行为很奇怪：活动幻灯片不会改变位置；单击寻呼机上的项目时，在主幻灯片中没有显示正确的幻灯片然后完全停止工作。

在这里查看： 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>

想法？

【问题讨论】：

标签： javascript jquery html slideshow jquery-cycle2

【解决方案1】：

终于想出了一个解决方法...无法使用插件的寻呼机选项，不得不添加一些脚本。

// 填充寻呼机

$('.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));
});

【讨论】：

得出了类似的结论，但发现它在轮播上环绕失败，（即循环创建的重复项目不会改变滑块） - 那么这对你真的有用吗？

【解决方案2】：

嘿，看看这里的问答

jQuery Cycle2 - Carousel pager navigation

在使用与您类似的方法时遇到问题。

【讨论】：