带有轮播寻呼机的 Cycle2 幻灯片不工作
Cycle2 slideshow with carousel pager not working
寻呼机是使用轮播幻灯片上的"高级自定义模板"构建的。
在我单击寻呼机之前,两者的幻灯片看起来都不错,然后它的行为很奇怪:活动幻灯片不会改变位置; 单击寻呼机上的项目时,在主幻灯片中不显示正确的幻灯片,然后完全停止工作。
在这里看到它: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>
思潮?
终于想出了一个解决方法...无法使用插件的寻呼机选项,必须添加一些脚本。
填写寻呼机
$('.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));
});
嘿 在这里查看此问答
jQuery Cycle2 - 轮播寻呼机导航
使用与您类似的方法有问题。
相关文章:
- 幻灯片滚动javascript不起作用
- 让文本输入幻灯片显示输入时的新文本输入?然后向后滑动
- 创建具有可变长度幻灯片显示的幻灯片
- 通过幻灯片更改事件停止使用jquery的音频
- 不能在同一页上进行多个jquery幻灯片切换
- 我可以使此幻灯片图像自动播放吗?
- JS幻灯片与CSS背景颜色变化
- 带有计数器、缩略图、进度条和淡入淡出效果的简单jQuery幻灯片
- jQuery图像幻灯片,在停止后淡出到第一张图像
- 删除“;上一个“;以及“;下一个“;基于当前幻灯片
- JQuery幻灯片,可点击编号位置
- Jquery幻灯片以一行左侧的图像开始,但我希望它从右端开始
- ionic幻灯片框中的每张幻灯片都有不同的HTML文件
- 使用jQuery无限循环播放HTML页面幻灯片
- 需要帮助自定义幻灯片自动播放
- 在 Cycle2 中使用 jQuery 基于幻灯片切换标题
- jQuery cycle2 幻灯片嵌套幻灯片“下一个”和“上一个”按钮
- Jquery Cycle2 幻灯片 - 从服务器 ASP .NET 加载图像
- 带有轮播寻呼机的 Cycle2 幻灯片不工作
- jQuery Cycle2幻灯片消失时使用“淡出动画”