问题标签 [jquery-cycle2]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
1137 浏览

javascript - jquery cycle2:如何通过幻灯片编号获取幻灯片

我正在使用循环 2 ( http://jquery.malsup.com/cycle2/ ) 创建一个轮播,我无法弄清楚如何通过“幻灯片编号”访问幻灯片。

我可以使用 cycle.API 循环遍历幻灯片数组并找到幻灯片编号

但我在 api 中的任何地方都找不到如何使用 jquery 通过其幻灯片获取元素(因此我可以编辑幻灯片元素的属性)。

我正在寻找的是类似的东西:

我花了很长时间试图弄清楚这一点,但我很难过。那里有人可以启发我吗?

0 投票
1 回答
331 浏览

jquery - jquery cycle2反向翻转不起作用

我无法使cycle2“翻转”转换的“反向”功能工作?

我已在Link to file中附加了测试 Html 文件。我将 data-cycle-reverse=true 添加到幻灯片 div 中,但它仍然不起作用。有人可以帮我吗 ?

0 投票
1 回答
218 浏览

javascript - 带有 maphilight 的 Jquery Cycle 插件停止工作

我正在使用带有 jquery maphilight 的 jquery 循环插件来突出显示导致一些问题的传单上的产品,正如您在第一个屏幕截图中看到的那样它是如何工作的,但是当我添加 maphilight 然后检查屏幕截图 2 这就是它的显示方式。你可以在这里查看 jsFiddle http://jsfiddle.net/Yjuqs/

这是 jquery 循环插件和 jquery maphilight 的代码

截图 1 截图 2

0 投票
1 回答
103 浏览

javascript - How can I differentiate between a click on a pager item and a click on a prev/next item in Cycle2?

I'm using Mike Alsup's awesome Cycle2 jquery plugin on a slideshow that features both a custom pager element (thumbnails) and previous/next buttons. How can I trigger an action using the cycle-after event only if the pager was clicked.

I don't want to use the click event from the pager element - that won't wait until the slide transition is complete, it fires right away, and seems to conflict with the slideshow animations sometimes.

0 投票
1 回答
409 浏览

jquery - Cycle2 状态始终为假

我有一个 Cycle2 幻灯片。我希望它每 5 秒循环一次幻灯片,但我也希望用户能够单击向上或向下键来推进幻灯片。单击向上或向下键时,我想确保幻灯片在前进到下一个或上一个之前不忙。问题是当我检查 .cycle-busy 时,它每次都返回 false 。我将幻灯片设置为暂停,并尝试在单击向上或向下键时检查 .cycle-paused ,这也返回 false。我错过了什么吗?

我正在使用 jquery 1.8.2。

0 投票
1 回答
1167 浏览

javascript - 周期 2 同步幻灯片放映,幻灯片放映周期之间有延迟

当使用来自 cycle2 API 的同步幻灯片示例时,我试图在幻灯片之间添加一个顺序延迟;例如:5s、10s、15s、20s ... 即第一个 div.cycle-slideshow 将在 5s 开始,然后第二个将在 10s 触发,然后在 15s 触发,然后在 20s 触发,然后第一个将在 25s 再次开始,循环继续。 http://jsfiddle.net/azeef/Pefen/

我怎样才能做到这一点?

0 投票
1 回答
534 浏览

javascript - Bootstrap 3 的 Cycle2,在移动设备上销毁循环,在比移动设备更大的设备上重新初始化

我有一个奇怪的。我有一个使用 cycle2 的幻灯片,效果很好。我在我的 HTML 中初始化它:

initialized正在destroyed使用

然后使用监视窗口调整大小

基本上,如果幻灯片是幻灯片,然后浏览器的大小被调整到 768 以下,它应该会破坏幻灯片(然后我的 CSS 会中继出 contnet)。

另一种状态询问幻灯片是否已被破坏,并且浏览器的大小调整为 768 以上以重新初始化循环。

这两个事件似乎都在工作(因为在循环日志中说它正在[cycle2] cycle-destroyed并且[cycle2] --c2 init--在正确的时间,但是当它重新初始化时它就不起作用了。

有任何想法吗?

0 投票
1 回答
223 浏览

jquery - 过渡前验证幻灯片

我正在使用 Cycle2 ( http://jquery.malsup.com/cycle2/ ) 在网站上创建类似向导的导航。我希望在单击下一个按钮时验证当前幻灯片,然后再转换到下一张幻灯片。

我已经尝试触发cycle-before事件并执行我的条件,但我不知道如何实际停止转换。类似的命令.cycle('stop')在触发时似乎不起作用cycle-before- 它继续到下一张幻灯片。

在允许使用下一个按钮之前,我需要验证幻灯片中的一些输入字段。

当前设置是:

有任何想法吗?

0 投票
1 回答
1237 浏览

javascript - Cycle2自动停止不工作

对于最近的一个项目,我们使用的是 Cycle2。我已经升级到最新版本。我们正在使用 Sitecore 来呈现内容。无论我采用何种方法(如下),我都无法让自动停止功能发挥作用。每个幻灯片有 2-3 张幻灯片,我们希望它按以下模式移动:1-2-3-1。

我们是否按照这样的规则将其渲染为自动播放:

或者,如果我们让它在没有“循环幻灯片”类的 JS 中以编程方式播放:

  • 我们正在正确加载 JQuery。
  • 在对功能进行了一些研究后,我已经尝试了自动停止的“真”和“1”。
  • 我们还使用 Carousel 和 Swipe Cycle2 库。
  • 我们同时加载了以下库:fancybox 2.1.4、enquire、imagesloaded jquery.ba-resize、jquery.qtip、jquery.rwdImageMaps、Slimscroll 和modernizer。
  • 它正常循环。我们可以根据捕获视口的变化让它内联停止,但标准的自动停止不起作用。这是一个快速的 concole 日志捕获(在 IE、FF 和 Chrome 之间相同)
  • [cycle2] --c2 init-- jquery.cycle2.min.js:6
  • [cycle2] speed: 3000 (number) jquery.cycle2.min.js:6
  • [cycle2] autostop: true (boolean) jquery.cycle2.min.js:6
  • [cycle2] timeout: 5000 (number) jquery.cycle2.min.js:6
  • [cycle2] autoHeight:容器(字符串)jquery.cycle2.min.js:6
  • [cycle2] 幻灯片:> li (string) jquery.cycle2.min.js:6
  • 它在带有静态内容的原始 HTML 模式下展示了相同的行为
  • 此外,我已经通过 JS Lint 运行了与页面一起启动的所有 JS。

任何帮助/建议表示赞赏。谢谢你的时间。

0 投票
1 回答
1107 浏览

jquery - 需要显示多个 json 图像数组但只有一个

所以它一定是我没有得到的迭代的东西!我的模板文件中有一个 for 循环,它显示多个 cycle2 幻灯片:

现在,最初我在 mouseenter 上进行了此操作,因此它为 for 循环中的每个 .image 执行此操作。现在我摆弄它来加载所有准备好的图像。这是我到目前为止所拥有的,但它只为 cycle2 幻灯片的每个实例加载第一个图像数组。

我已经用这条线尝试了各种方法:

就像使用 .children 和 img:eq(0) 一样,但上述方法在正确引入图像大小参数的情况下效果最佳。

但是如何迭代以便每个 cycle2 实例都列出自己的 json 数组呢?

非常感谢任何帮助。

编辑以澄清下面的答案,看看它是否有帮助: