问题标签 [owl-carousel]

我正在为 jquery 使用 owl-carousel 插件，并且数据来自返回 JSON 的 django 视图。

现在这工作正常，但我将如何更改它以继续向服务器请求新数据？我发送的 JSON 会随着时间的推移发生变化，我不知道如何告诉 owl-carousel API 继续请求服务器。

我尝试将 owlCarousel() 调用放在 setInterval() 函数中，但它仍然只需要 JSON 一次，并且只使用初始 JSON 响应......

这怎么可能解决？提前致谢

I'm working on a site, with 2 photo sliders from "owl-carousel".

The first slider works perfectly, but the second slider places all the photo's under each other.

Is it a problem in the jquery or just in the html?

我在一个网站上很忙，有 2 个来自 owl-carousel 的照片滑块。

第一个工作正常，但第二个只显示 1 张图片，没有按钮和一个大容器。对此很陌生，所以任何帮助都会很棒。

我已经忙了一段时间了，在这里问了很多问题。
但这是整个代码，它是关于第二个轮播不起作用的，第一个很好用。

谢谢。

http://pastebin.com/wtPgi4cV

我在 Phonegap 的移动应用程序（iOS 和 Android）中使用 Owl carousel 插件，我可以拥有超过 100 个或数千个猫头鹰项目或幻灯片。当 DOM 变大时，可能会因为内存问题导致应用程序崩溃。

我想要实现的是在用户滑动时删除“不”可见的 div（猫头鹰项目）。

这是初始化 OwlCarousel 后生成的示例 DOM：

当项目数量变大时，这可能会导致内存问题并导致应用程序崩溃。我在我的 iOS 应用程序中尝试过这个，但它在显示 OWL Carousel 之前就崩溃了。

我想要实现的是从 DOM 中删除当前不可见的元素，然后在它们与当前可见元素接近时添加它们。

例如，当前可见项目是项目编号 7，项目 5,6,7,8,9 应该只在 DOM 中，其余部分被删除。当用户从项目 7 滑动到项目 8 时，项目 6、7、8、9、10 现在应该在 DOM 中。

到目前为止，除了初始化猫头鹰轮播外，我还没有尝试过编码。

我不确定我的方法是否是最好的，但我在继续之前征求其他人的意见。

为 Owl Carousel 处理这种场景的最佳方法是什么？

笔记 ：

TurnJS ( http://www.turnjs.com ) 也使用了这种方法。不知道这是否有帮助。

希望大家给点建议和意见。

我使用 Owl Carousel 作为我主页的滑块，但我想在滑块的图像部分周围放置一个边框。如果我在整个 owl-theme 类周围放置一个图像，它也会将它放在 next 和 prev 按钮周围。

我还尝试将边框放在自动生成的“owl-wrapper-outer”类周围，但最终将边框放在容器内的图像周围，一旦滚动到左侧，左侧边框将与图像保持一致。
这是检查器中显示的代码：

这是一个jsfiddle，基本上是我页面上的内容，我试图在图像部分周围设置边框，但不是“下一个”和“上一个”按钮。

http://jsfiddle.net/mX455/6/

在 IE 浏览器中，我在 RTL 方向的 owl carousel 中遇到了一些问题。

早些时候，我也尝试过使用方向属性，但没有奏效。

在 ff & GC 浏览器中，它按照我的要求工作。但只面临IE问题。

问候，索波

我很难弄清楚为什么会这样。我正在使用猫头鹰图形幻灯片，当鼠标悬停在最后一个幻灯片元素上时，页面想要向右滚动页面！？！！有一次，我以为我已将其范围缩小到由 owls translate3d css 创建的填充问题，但无法再次找到该问题。我尝试缩小容器以确认 css 中的填充问题，但我仍然遇到同样的问题。关闭其他 jquery 并检查控制台是否有问题仍然让我摸不着头脑。我已经打开了网站进行预览，所以你们都可以看到正在发生的事情。http://cypion.com/template.php。使用滑块并转到最后一张幻灯片并用鼠标触摸它。有任何想法吗？

编辑 Chrome 似乎是唯一存在此问题的浏览器。

我想要做的是使用 ng-repeat 指令有角度地构建我的轮播结构，然后将其提供给 owl carousel jquery 插件。部分技巧是这个轮播带有一个视图（ngView）。

可悲的是，这似乎并不那么简单。

到目前为止，我探索的选项是：

1. $viewContentLoaded事件。这不起作用，并且显然是不赞成的（因为它相当于来自控制器的 DOM 操作）
2. 只需在视图页面底部包含一些脚本来初始化轮播插件。这适用于静态内容，但不适用于通过 ng-repeat 添加的内容
3. 添加自定义指令。好的，这可行，但这似乎意味着我必须自己建立整个旋转木马。很好地使用 jQuery.append() 等。下面的代码如下。

基本上我的问题是：是否有其他/更好的方法来做到这一点（而不是无限循环和 HTML 字符串连接）？

请注意，我需要构建的真正轮播项目比下面的示例要复杂得多。

好的，现在一些代码：

首先，来自相关视图的 HTML 片段：

接下来，指令配置：

编辑

好的，与此同时，我发现了该$templateCache服务。

本质上在脚本标签中定义一个模板（我的实际上是在相关视图中）：

然后你可以在你的指令中得到这样的：

对于最后一点魔法，使用 Oakfish 的建议$timeout：

以下是实际问题的链接：http: //ichael.net/files/slider-issue.html

如果你在 Chrome 中加载它，它可以正常工作。但在 Safari 或 Firefox 中，第二张和第三张幻灯片不显示。关于为什么的任何帮助？

抱歉，很难看到下一个/上一个链接，但它们就在两边的中间。