问题标签 [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 投票
0 回答
1952 浏览

jquery - jQuery Cycle2轮播中元素的边距

我正在使用 Cycle2 创建一个水平滚动的 jQuery 图像轮播。这些图像都是统一的高度(200px),但有不同的宽度。

这是用于显示轮播的代码:

...这是浏览器中的结果:

Cycle2 轮播,没有额外的样式

轮播中实际上显示了四个单独的图像,但它们之间没有间距。

这是我正在寻找的结果:

Cycle2 轮播 - 我所追求的

我想为 Cycle2 轮播中的图像添加右边距,但是当我修改imgora元素以包含边距或填充时,轮播不会正确地向左“零”。

相反,轮播似乎向左偏移,因此第一张图像被部分隐藏。在下图中,我添加margin-right: 10px了每个a元素:

Cycle2 carousel when margin-right: 10px 添加到每个锚元素

任何人都可以建议如何为图像添加边距或填充,而不是生成包含主要艺术品周围空白区域的图像?

谢谢。

0 投票
2 回答
834 浏览

javascript - 寻呼机区域内的Jquery Cycle2链接不起作用

我有一个使用 cycle2 插件的设置,但是寻呼机区域内的链接不起作用,除非您右键单击它并“在新窗口中打开”。建议?

查看fiddle,注意单击寻呼机区域中的链接不会执行任何操作,但如果您右键单击它,链接会打开。

0 投票
2 回答
431 浏览

jquery - sliding Item change instead of img - cycle2

Hello please check demo

If slide items are img it will work

0 投票
1 回答
197 浏览

jquery-cycle2 - jQuery cycle2 和 'continueAuto'

我有一个带有寻呼机的简单cycle2幻灯片。幻灯片会自动进行(即使用 setspeedtimeout)。我想要实现的是,一旦用户单击寻呼机中的链接,幻灯片就会变成“手动”(自动转换停止),并且从那时起,它只能由寻呼机控制。cycle2 API 文档说有“continueAuto”选项应该可以达到目的。所以我为这个cycle-pager-activated事件做了一个处理程序,如下所示:

该事件按我的预期被调用(在单击寻呼机中的链接时),但调用cycle({continueAuto: false})什么也不做,幻灯片无限播放。我究竟做错了什么?

0 投票
1 回答
429 浏览

jquery - looper.js 插件 - 交叉淡入淡出动画之间不可见的图像

我一直在尝试使用looper.js循环遍历 div 内的各种单词或图像(示例

除了我使用淡入淡出动画选项 ( ) 外,一切似乎都正常class="xfade"内容仅在动画期间出现,否则不可见。

通过注释掉以下内容可以解决此position: relative问题.looper .looper-inner

它不是一个可接受的解决方案,因为它弄乱了我在移动设备上的响应式布局。

我想这一定是我的菜鸟错误,因为我使用的是默认的官方示例......

演示: jsfiddle

谢谢您的帮助。

0 投票
0 回答
86 浏览

navigation - 如何自定义 Cycle2 pref/next 功能?

我有兴趣让 Cycle2 上一个/下一个功能类似于BBC 新闻头版头条新闻图像幻灯片上使用的功能。

有关如何:

  • 使上一个/下一个导航出现在悬停上?
  • 使上一个/下一个导航从容器底部向上移动?
  • 从容器中移动鼠标后,让首选项/下一个导航暂停一段时间?
  • 间隔过去后,让首选项/下一个导航向下移动(并消失)到容器底部?
  • 单击上一个/下一个按钮时使用淡入淡出图像之间的过渡?
  • 目前我已经成功制作了一个 Cycle2 基本容器,其中图像淡入/淡出但没有导航。这是我的测试样本。

    0 投票
    1 回答
    400 浏览

    jquery - Cycle2幻灯片故障,其中图像将与下面的DIV随机重叠

    在最近的一个项目中,我遇到了一个问题,即 Cycle2 幻灯片中的图像将在其下方的 div 上重叠。它发生得非常随机(有七页使用这个幻灯片,哦,每 8 次或 9 次发生一次——我无法发现这种模式。

    发生这种情况时,打开网络检查器将强制重绘,并且图像将弹出到位。我在 Safari、Firefox 和 Chrome 以及 Mac 和 Windows 上都看到了这一点。

    故障的屏幕截图在 Droplr 上,现场版本在这里。它发生在所有七个页面(在 Seraform 和 Previous Work 菜单下),并且可能需要在所有页面上单击几次才能看到问题。

    http://d.pr/i/wnwk

    这就是页面的外观:

    http://d.pr/i/esRS

    我已经尝试了所有我能想到的调试技巧,但完全不知所措。

    0 投票
    2 回答
    1745 浏览

    javascript - jQuery cycle2 以编程方式渐进式加载

    我正在使用cycle2,并以编程方式将其设置在单独的scripts.js 文件中。在添加渐进式加载之前,滑块都运行良好。我在页面上有多个滑块,所以设置如下:

    我的 HTML 标记是,对于每个滑块,例如:

    但是,现在当我加载页面时,我的控制台状态:ReferenceError: slides is not defined这是有道理的,因为cycleinit 在 script.js 中并且这个标记在另一个页面上,但是我怎样才能使它工作,或者有更好的方法吗?请记住,页面上有多个滑块。

    谢谢,R

    0 投票
    3 回答
    4774 浏览

    javascript - Cycle2 Carousel 活动幻灯片在中心

    我正在使用带有轮播寻呼机的 Cycle2,与此演示的方式相同:http: //jquery.malsup.com/cycle2/demo/caro-pager.php

    目前演示中的活动幻灯片位于左侧,除非您位于最后几张幻灯片上。我想要的是:

    1. 活动幻灯片从左侧开始,在幻灯片 1 上
    2. 然后单击幻灯片 2 时,缩略图不会移动,但第二个缩略图显示为活动状态。
    3. 单击幻灯片 3 时,缩略图不会移动,但第三个缩略图(中间)变为活动状态)。
    4. 单击幻灯片 4 时,所有缩略图向左移动一并且第四个缩略图(现在在中间)处于活动状态。
    5. 与上述幻灯片 5、6、7 相同。
    6. 单击幻灯片 8 时,缩略图不移动,但第八个缩略图变为活动状态(现在从右数第二个)
    7. 单击幻灯片 9 时,缩略图不会移动,但第九个缩略图变为活动状态(右侧的最后一个缩略图)。

    见图:

    在此处输入图像描述

    我已将演示复制到此处的 jsfiddle:http: //jsfiddle.net/Qhp2g/1/但非常感谢一些帮助,因为我不确定从哪里开始(!)我已经尝试使用data-cycle-carousel-offset="40%"on#cycle-2作为该用户尝试使用与我类似的问题Cycle2: Center Carousel active slide below main slideshow这不起作用,因为您无法访问最后一张幻灯片并且开始时左侧有空间。

    我想我可能需要更改插件轮播脚本 - http://malsup.github.io/jquery.cycle2.carousel.js - 以满足我的需要,但真的不知道从哪里开始!非常感谢您的帮助。

    0 投票
    1 回答
    383 浏览

    jquery-cycle2 - Cycle2 不会触发“循环初始化”

    我想在幻灯片完成时和滑块开始工作之前运行函数。我的代码如下:

    一切都很好,除了cycle-initialized- 它不会触发。我能做些什么?