问题标签 [owl-carousel]

嗨，我从这篇文章中看到了这个 codepen： http ://codepen.io/anon/pen/jJAHL： owl carousel，navigation center

我需要将项目设置在轮播的底部。

我试过了

但它不起作用

我正在尝试在我的 Meteor 应用程序中使用 owl carousel jquery 插件来浏览今天的项目。现在，我在模板的渲染回调中有 owl carousel 代码，因此一切正常，并且在渲染模板时，应用了 carousel 包装器。到目前为止，一切都很好。

除此之外，我有一个更改日期的按钮，并且项目数据依赖于那个反应性的“日”会话，所以当我点击它时，它会将会话更改为第二天，自然项目会更改并且新的加载了一段 dom，替换了开头渲染的轮播。

我知道在过去渲染的方式是可行的，我不会有问题，因为模板会被重新渲染。但现在似乎并非如此。所以我尝试在子模板（包含项目的那个）渲染回调中移动轮播代码。那里也没有运气。

每次数据更改时，我都偶然发现了一种执行渲染代码（https://github.com/davidworkman9/meteor-reactive-rendered/blob/master/reactive-rendered.js ）的技术，但它似乎仍然在之前执行一切准备就绪，导致轮播不完整。

我真的觉得我已经在这里尝试了一切，所以如果有人能解决这个问题，将不胜感激。

这是索引模板：

这是index.js文件：

这是在循环 div 中加载的heroItemsList 模板：

谢谢你。

我正在使用 Owl carousel @version 2.0.0

有问题的网站：http: //miracon.ca/homes/prima/（请查看“图库”）。我在 iPhone 上的 Safari 中运行得非常可靠，但在 Chrome iOS 中存在问题。图像未正确居中。这是我的初始化代码：

如果我设置“loop：false”，它会很好地工作，并且第一个图像应该居中。设置“循环：真”，它没有按预期居中。

我这里有一个例子：VideoSlide 例子

我的问题是什么都没有显示。

我已经有效地从 Owl 站点复制了代码，但我没有得到任何显示。

最初，我将它编码在一个更大的站点中，这是缩减版，仅适用于轮播。我有旋转木马处理图像，但视频让我望而却步，如果有的话，视频看起来应该更简单！

我采用了最新的 Owl JS 和 CSS 版本 2。

我没有修改 JS 或 CSS，它处于下载状态。

我已经与 Owl page for videos 和 Calvin College 进行了代码比较，Calvin College 也使用 Owl carousel 和视频。

据我所知，我也做过同样的事情。

显然我没有。

黛比

我知道有可能通过当前位置编号跳转到猫头鹰轮播中的某个位置。喜欢：

是否可以跳转到匹配的ID？假设我有一个带有缩略图的站点，单击其中一个会打开一个模式，其中猫头鹰轮播在正确/匹配的位置蜂鸣。就像是：

提前致谢！

编辑：

哈希 URL 解决方案也很棒，但是：猫头鹰轮播在一个花哨的盒子中打开......

第二次编辑：

抱歉，规格已更改，并且变得更加困难。owl 滑块以花式框模式在 iframe 中打开。任何想法如何将数据传达给它？！

第三次编辑：

来自网站的代码：

来自 iframe 的代码：

所以，如果我点击网站上的 href，猫头鹰轮播应该跳转到第三个（匹配的）项目。

我正在为我的网站的移动版本使用 OwlCarousel 2 beta。显示图像的数量取决于屏幕宽度

页面方向更改后，我想用新的 qua 值重新初始化 owlCarousel。

试过了

接着

方向更改（或窗口宽度更改）后，它会破坏页面布局。这是 JSFiddle：http: //jsfiddle.net/wgj7y86y/1/

任何想法如何解决这一问题？

我有一个应用程序可以在轮播中显示多个图像。

我注意到，当从左向右滑动时（反之亦然），图像的移动是生涩的，但是当我点击导航按钮（在我的例子中是底部的小点）时，它非常流畅。

这是一个已知问题吗？在这种情况下如何提高图像移动的平滑度？

我几乎完成了创建一个整洁的用户个人资料页面，用户可以在其中观看他们的个人资料。我正在使用集成在 Wordpress 中的 Bootstrap 框架。我使用Bootstrap 的选项卡来获取大量信息，但要让用户清楚。我有两个主要选项卡，称为“AWF I”和“AWF II”，在这些选项卡中，我有有关基金的信息，还有一个用于显示图片的 Owl Carousel 正如您所见，轮播效果很好，但是当我激活选项卡“AWF”时II" 我明白了： 如您所见，图片/轮播本身非常小，我不知道如何克服这一点，轮播应该像“AWF I”选项卡中的那样显示。这里有一个线索，可能会让你们知道为什么会发生这种情况：当我右键单击并检查 Google Chrome 中的元素时，轮播会弹出到正确的大小，就像它应该的那样： 但是当我切换回“AWF I”时之后，那个轮播显示小图像，所以基本上，用谷歌浏览器检查会让他们切换角色。

对此有任何线索吗？如果您需要更多信息，请告诉我！谢谢！

更新 01

这是我用来调用轮播的代码：

$(document).ready(function()目前，在滑块本身的初始化之后，我有以下内容。

这段代码代表 3 个滑块，它可以工作，但我有更多滑块。

• 当我添加超过 4-5 个以上的滑块时它就不起作用（它适用于某些，而不适用于其他）

有没有办法在这里添加一堆滑块？

顺便说一句：这用于页面大小发生变化而没有重新调整视口大小的情况，例如切换侧边栏或选项卡内容。

我有一个带有多个滑块的页面，这些滑块是用 owl carousel 创建的。我想为每个滑块定义不同数量的可见项目。完美的解决方案是在 HTML 中定义可见项目的数量（作为类或数据）。我刚刚开始使用 jQuery，所以我只设法使用这样的数据属性传递一个值：

然后我将此值应用于 JS 中的变量，并在设置中添加此变量，而不是像这样的项目编号。

上面的代码无法正常工作，因为第一个滑块的值应用于页面上的所有滑块，我需要每个滑块都有不同数量的项目。我怎样才能做到这一点？

提前致谢