问题标签 [owl-carousel-2]

我正在使用Owl Carousel 2.0。我想显示一个项目，前一个项目（左侧）的一半（或更少）和下一个项目（右侧）的一半（或更少）。只需将它们的一部分放在右侧和左侧：

我一直在尝试只使用 CSS（padding和margin否定的owl-stage-outer），但显然 Javascript 覆盖了它们。

到目前为止，这是我的代码：

Well, I'm using a owl-carousel-2 plugin now.

And I encounter the following problem:

The markup code:

The problem is:

When I initialize with the $owl.owlCarousel(); statement, which under an hidden state, its size is not initialized.

So when I show that control, the control displays in a mess!

But when I resize the window, it seemed to be triggering a re-render. The control render the contents, then displayed well.

So I'm wondering if there is a way to trigger this re-render (or refresh) method on it.

In order to make sure the control won't display in a mess.

I tried to read the documents and sources, but not yet have a good solution.

Please help.

我有以下代码块。我要做的就是在幻灯片放映中获取当前图像的 src。它不起作用，尽管它可以很好地改变幻灯片，但控制台中根本没有出现任何内容。

HTML：

jQuery：

我目前正在使用 OwlCarousel2 来满足我的轮播需求。我选择了 OwlCarousel2 而不是 OwlCarousel1，因为它有一个 URL 哈希导航：http ://www.owlcarousel.owlgraphic.com/demos/urlhashnav.html

以上是我用来生成轮播的 PHP 代码。我有十四张图片，所以我的代码循环遍历所有十四张图片并data-hash为​​每张图片添加一个对象（用于锚导航需要）。

以下是我的 Javascript 代码：

现在，如果用户在其 URL 中手动添加散列，则上述轮播完美运行，即someurl.com/voting.php#4，这将导航到第四张图像。

但是，我想做的是，如果 url 导航到someurl.com/voting.php，当他们滚动浏览每个图像时，我的 URL 将相应地更新其锚点。为什么？因为如果我的用户单击图像（其中包含 a href）并转到上一页，他们可以导航回他们正在查看的图像，而不是转到第一张图像的默认行为。

根据 OwlCarousel2 API（实际上与 OwlCarousel1 完全不同），要获取当前项目，您可以这样做：

具体来说，使用event.item.index. 我的代码正是这样做的！但我无法检索当前索引！我的错误是： Uncaught TypeError: Cannot read property 'item' of undefined在 Chrome 的控制台下。

非常感谢 JS 大师的任何帮助！

我尝试在 StackOverflow 和 OwlCarousel2 API 上进行搜索，看看是否可以做到这一点，但是，没有运气。

我还检查了这个线程：append /remove anchor name from current url without refresh

http://owlgraphic.com/owlcarousel/demos/randomOrder.html

我怎样才能用 owl carousel 2 做同样的事情？http://www.owlcarousel.owlgraphic.com/

现在做了升级，不知道怎么做随机，这个旧的旋转木马停止工作:(

请帮助，如何在新的功能猫头鹰轮播 2 中实现相同的功能。

谢谢！

我正在尝试检测 Owl Carousel 何时准备好进行操作，以便我可以向其中添加内容。下面的脚本启动轮播，但初始化的事件永远不会触发。

我正在研究一个包含两个同步猫头鹰滑块的滑块。sync1 是主滑块，sync2 是缩略图滑块。当我单击第二个滑块的元素之一时，sync1 会转到正确的幻灯片。现在是我的问题：

当用户单击任何缩略图时，绿色边框应出现在单击的元素上，并应保持在那里，直到单击另一个元素。

我尝试使用 jquery .addClass 和 .css 但没有任何反应。

我认为我应该添加带有“位置：绝对”的 div 以支持单击的元素，但我不知道该怎么做。请帮忙！:)

这是我的js

这是有问题的页面：http: //k2ld.91dev.com.au/project/balwyn-residence/

旋转木马使用autoheight:true.

在某些移动浏览器上，包括 Dolphin、iPhone、Google Nexus 4（在 Chrome 开发工具中查看时），.owl-wrapper-outer容器将应用一个小的内联高度来裁剪第一张图像。

一旦你向左和向后滑动，高度就会重新计算，一切都很好。

我的 Owl 代码如下所示（在 a 内document.ready）：

我最初使用 Owl Carousel 1，然后切换到版本 2，看看问题是否消失了……它没有。

图像完全加载后，如何让轮播计算其高度？

我的目标是制作一个看起来像这样的轮播：

如果您不知道自己在看什么，则有 5 个图像/项目，但只有中心的一个以全尺寸显示。靠近中心的图像更小，外部的图像更小。

我在 Owl Carousel 的第一个版本中实现了这一点，但它不支持循环，这使得这种设计很荒谬（无法到达侧面图像......）。

我是这样做的：

只是向您展示了 5 个项目的代码，但我使用了一些 if 子句使其也适用于 3 和 7。该类active仅由width: 100%和passive组成width: 80%。

有谁知道如何在 Owl Carousel 2 中获得相同的结果？我正在使用_items而不是，$owlItems但我不知道这是否正确。没有afterAction，并且事件/回调似乎没有像 v2 中那样工作。

我对 owl carousel 2 有一点问题，

这是我网站的旧版本， http: //lukaszradwan.com/pl/ 请看一下主滑块。这不是猫头鹰旋转木马，我不知道它是什么，但它工作正常（高度设置为 100%）——而且它太重了。

我已将其更改为猫头鹰旋转木马，请参阅此http://lukaszradwan.com/ 它反应灵敏，但我无法将高度设置为 100%。

JS

HTML

如果您有任何想法如何做到这一点，请与我分享。提前致谢。