Question

寻呼机是使用旋转木马幻灯片上的“高级自定义模板”构建的。

两张幻灯片看起来都很好，直到我点击寻呼机，然后它表现得很奇怪：主动幻灯片不会改变位置;单击寻呼机上的项目时，在主幻灯片放映中没有显示正确的幻灯片，然后完全停止工作。


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

思想？

Answer 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));
});

Answer 2

嘿，看看这里的Q＆amp; A

jQuery Cycle2 - Carousel pager navigation

与您的方法有类似的问题。

Cycle2幻灯片播放器与转盘寻呼机无法正常工作

2 个答案: