问题标签 [owl-carousel-2]

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 回答
1379 浏览

javascript - 将猫头鹰滑块与 WordPress 默认图库一起使用

由于我无法覆盖的原因,我被迫为我的网站使用 WordPress 的默认图库添加。

我正在尝试使用 Owl Slider 来控制帖子中的“产品评论”部分。

但是,似乎 Owl Slider 和 jQuerySlider 2 都可以处理正在使用的元素<div>项目一起使用的元素。

有没有办法让 Owl Slider 使用这些<dl><dt>+<dd>元素?

我需要让它看起来像左侧的产品图像,右侧的描述,我可以使用 CSS 轻松控制,但我需要确保 Owl Slider 可以与上面的元素一起使用。通过 JavaScript 更改 Gallery 的 html 输出也不是一种选择,因为我的高级开发人员讨厌使用任何可以避免的 JavaScript。

使用代码

我能够将其包装起来,但是它会连续显示每个画廊项目。我无法链接到该页面,因为它位于开发站点上。

谢谢!

0 投票
1 回答
859 浏览

javascript - Owl Carousel 2 分页标题不按顺序排列

我正在使用 Owl Carousel 2 制作图像滑块,并且一切正常,但我目前正在尝试将文本分页添加到滑块的控件中。我在图像的 HTML 中添加了 title 属性,并使用 javascript 来填充滑块的分页。

这是HTML:

这是我的javascript代码:)

但是当它显示在屏幕上时,这里是命令..

寻呼机

不知何故,顺序完全错误..

我添加了一个控制台输出来显示添加到寻呼机的标题,这也是错误的顺序:/

0 投票
1 回答
632 浏览

joomla - 基于joomla的猫头鹰旋转木马

我们有一个基于 Joomla 的学校网站,底部有一个滚动的猫头鹰旋转木马。

我想让图像包含指向他们网站的链接。

我到处寻找猫头鹰旋转木马的代码在哪里,但我找不到。它有一个模块,但它没有任何地方可以更改代码。

网站网址是:http ://www.kibworthprimary.org.uk

这是 default.php 中 tmpl 文件夹中的代码

0 投票
2 回答
3335 浏览

jquery - 鼠标滚轮滚动仅触发一次下一次回调

我有这样的猫头鹰轮播设置

这是js

jsFiddle在这里:http: //jsfiddle.net/f0yph3aL/

如您所见,如果您将鼠标滚轮滚动到红色方块上,则幻灯片会像疯了一样移动。我只需要让 next.owl.carousel 触发一次,因此通过鼠标滚轮滚动它只会更改 +1 幻灯片。

我试过 setTimeout 里面owl.on,试过debouncebind/unbind mousewheel. 也许我做错了。感谢您的任何建议。

更新:

这是未绑定的鼠标滚轮,效果很好,但我不知道如何在超时后重新绑定鼠标滚轮(setTimeout) http://jsfiddle.net/cz122kk6/1/

0 投票
1 回答
341 浏览

php - 如何jsonEncode owl carousel 2 responsive config

这是错误:

未捕获的类型错误:无法使用 'in' 运算符在 { 0:{items:1,nav:true}、768:{items:2,nav:false}、992:{items:3,nav:真的} }

如何解决这个问题?谢谢。

0 投票
1 回答
538 浏览

javascript - 到达最后一张幻灯片时停止幻灯片

在 Owl Carousel 中到达最后一张幻灯片时如何停止幻灯片?我已经click使用下面的代码在功能上完成了它。现在,我想在到达最后一张幻灯片时达到同样的效果

0 投票
0 回答
5150 浏览

javascript - 猫头鹰旋转木马2同点过渡速度

我有一个以这种方式设置的单件轮播

在此处输入图像描述

当我从 1 到 2(或在彼此相邻的任意两个点之间)时,转换延迟 1 秒(预期),但是当我从 1 到 4 时,转换需要更多时间。

无论点的距离如何,我都希望转换速度始终相同(1s)。

澄清一下,当它位于点 1 并且我移动到点 2 时,我想要幻灯片 2 中的元素,延迟一秒钟的显示时间,而当从 1 到 4 时,幻灯片 4 中的元素也延迟一秒钟的显示时间。

这是一个jsfiddle示例

请注意,在 jsfiddle 中,我放置了一个span.test具有 1 秒延迟动画的幻灯片,因此当幻灯片在自动播放中移动或您在完成过渡时从 1 转到 2 时,span.test 出现但当您从 1 转到 4 时span.test到达已经显示。

如果你能帮助我,我将不胜感激

0 投票
1 回答
1489 浏览

javascript - 同步 2 个 owl carousels 或添加回调,例如“onchangeprev, onchangenext”

我正在尝试同步 2 个猫头鹰轮播,以便它们以相同的时间和相同的方式更改幻灯片。旋转木马是循环的。当我使用这个时:

到达项目末尾后的第二个轮播不会像应有的那样移动(它是循环的),而是向后移动到第一个项目。

我还禁用了拖动并尝试了这个:

第一次看起来没问题......但是自动播放也启用了,并且在两个轮播(autoplay:true, autoplayTimeout:4000, smartSpeed:400)上都是相同的,如果观看轮播一两分钟,我可以注意到在更改幻灯片之间发生时间间隔,它们开始异步移动。间隔不大,不到 1 秒,但真的不需要:(

如果我可以prev.owl.carousel在将项目更改为上一个以及next.owl.carousel将项目更改为下一个时调用触发器,并在第二个轮播中禁用自动播放,但我没有找到这样做的方法:(

欢迎任何关于使用另一个响应式且可以循环和同步的滑块插件的建议

0 投票
3 回答
18785 浏览

jquery - Owl carousel 2 克隆项目点击事件未触发

我目前正在开发中使用 Owl Carousel 2.0.0-beta.2.4 以保持旋转木马居中并循环播放效果很好的项目。

由于某种原因,Owl 在设置时生成的克隆项目loop: true似乎没有在点击时触发。您将在下面我放在一起的示例中看到,所有其他项目在触发时都会提醒单击,但如果该项目已被克隆,它似乎没有注册单击事件。

JSFiddle

HTML:

CSS:

JavaScript:

这让我的生活变得很糟糕,有什么建议吗?

0 投票
1 回答
482 浏览

javascript - Owl carousel locating divs

i am using owl carousel 2, where i am using the center function. I have 5 items to be displayed on the carousel. Is it possible using jquery to add classes to find certain divs within the carousel, without having to add ids or classes on the div. http://owlcarousel.owlgraphic.com/demos/center.html

heres my html

heres my js

What i want if you were to view the actual carousel on live would be the addition of these two classes "a" and "b"

so i am basically trying to locate the divs next to center and the second div next to center