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

jquery - Owl Carousel 2 响应式宽度问题

我在使用Owl Carousel 2滑块时遇到了一个小问题(但非常烦人)。

本质上,我想要一个最大宽度为 824 像素的单项滑块,因为它是我的图像的大小。其余时间,滑块是其父项宽度的 95%。

我的问题是,如果由于我的视口大小,我的滑块的父类将我的项目调整为 824px 宽度(我之前为主容器设置的最大宽度),则会发生这种情况:

http://i.imgur.com/Vk3s7f4.jpg

编辑 1:制作了一个快速的 codepen要查看问题,请正常查看页面,然后手动调整其大小(尝试大约 800px 的宽度),然后刷新。

如您所见,下一个项目部分显示在右侧,就像我的活动项目只是不想以 100% 填充其容器。奇怪的是,只有当页面以这个视口宽度加载时才会发生这种情况;如果我尝试通过手动调整浏览器窗口的大小来复制该问题,那么一切看起来都还可以,并且按预期运行。如果我尝试使用填充(图像上的边框和项目中的填充,将它们分开)来“修复”它,那么在手动窗口调整大小时会发生奇怪的事情——所以这不是一个选项。

如何让项目在任何视口大小下以 100% 填充滑块宽度?

编辑 2:有人建议 jQuery 脚本间歇性工作很可能是一个问题。我在阅读我没有写过的 jQuery 方面并不出色,所以我能得到第二个意见吗?

0 投票
2 回答
1222 浏览

javascript - 猫头鹰旋转木马 2 下一项

它在 owl carousel 2 中可用,如果单击下一步按钮提供额外的页面图像?因为默认只有一张下一张幻灯片。

它是如何工作的一个例子:

我想

谢谢

0 投票
1 回答
1262 浏览

javascript - 使用 AngularJS 动态内容加载 Owl Carousel 2

我无法在 angularjs 动态内容中加载猫头鹰轮播。

我使用这个(编辑的)html:

以及对我的应用程序的此(已编辑)指令:

但是每次加载新内容时我都无法加载轮播。我尝试绑定 jquery 事件,在控制器中调用函数......等等。

PD:我使用 ng-routes 并动态加载 html。

0 投票
1 回答
2278 浏览

jquery - 在 WordPress 循环中时出现猫头鹰轮播加载问题

我目前正在使用 owl carousel 滑块显示来自 WooCommerce 的 12 种随机产品,当页面加载时,在 owl 计算所有内容之前似乎存在延迟,从而导致“跳板”类型的效果。

我已经做了一些关于使用通用猫头鹰轮播的测试,它具有静态内容,并且在页面加载时呈现良好,但是随着从 WordPress 循环中提取数据的介绍,这就是问题所在!

同样http://preview.meeko.me/product/navy-floral-print-pleat-skater-dress/

这是 owl-carousel 调用:

我进入 Woocommerce 的循环

任何帮助将不胜感激!

0 投票
4 回答
8180 浏览

jquery - OwlCarousel 在后台预加载图像

我正在使用带有延迟加载选项的 owlcarousel 2,我想在用户看到轮播的第一张图像时开始在后台预加载下一张幻灯片图像,因此用户看不到加载器并直接在下一张幻灯片中看到加载的图像

这是我的html代码

这是我的 javascript 代码

0 投票
3 回答
60464 浏览

javascript - 令人耳目一新的猫头鹰旋转木马 2

当我点击它们时,我有 3 个 div 会激活滑动切换。每个 div 里面都有猫头鹰旋转木马滑块。

如果我触发一个 div 滑块会显示,但是当我单击其他 div 滑块时,除非我调整窗口大小,否则不会显示。

如何触发每个 div 中滑块的滑动切换刷新?

我在滑动切换上尝试了这个,但它不起作用:

0 投票
3 回答
3013 浏览

owl-carousel - owl-carousel 2 chrome 拖动时空白图片

设置一个测试页面来试用 owl.carousel.2.0.0-beta.2.4,它在 IE 中运行良好,但在 Chrome (Win10) 中,当您单击并拖动时,图像会消失。我不知道有什么特定的方法可以让它们消失。当您停止拖动时,它们会重新弹出。

在两个不同的 Win10 系统上有这个问题。在我的带有 Chrome 的 HTC 手机上,它的作用要小得多。

演示在我测试的系统上没有这个问题;它们拖得很顺畅,但我相信它们只是没有图像的文本。

我是否设置错误?它是否使用了一些在 Chrome 中无法正常工作的回退?

http://www.crystalvalleycomputers.com/dev/atlasnew/owltest.php

0 投票
0 回答
634 浏览

owl-carousel-2 - 如何使用 Owl Carousel v2 获取当前元素的 ID?

如何使用 Owl Carousel v2 获取当前元素的 ID?

如果第一张幻灯片可见,回调将返回“1”。

0 投票
1 回答
299 浏览

meteor - 望远镜猫头鹰旋转木马

我正在尝试将 owl-carousel 与Telescope一起使用,但我无法使其工作。我目前没有动态数据。以下是我遵循的步骤。

  1. 创建一个望远镜包。
  2. 添加了主题蔡司。
  3. 添加owl-carousel 包

然后在用户个人资料上,望远镜应用程序以表格格式显示用户喜欢的帖子列表,我想将其显示为带有图像的轮播。(请注意,这是最终目标,现在我只是想让基本的 owl-carousel 功能正常工作)

以下是我采取的步骤。

在 User_profile 模板上,我添加了一个新模板carousel

完成后,我添加了支持模板的 js 文件,如下所示。

有了这个,轮播就可以工作了,向我展示了 10 个不同的元素,正如您在下面的视频中看到的那样。即使自动播放也可以,但是按钮或圆点却不行。我尝试了无数的事情,并提到了许多文章更改超时,添加自动运行等。但是,这是一个静态列表。

不知道为什么它不起作用,任何帮助都会很棒。

https://youtu.be/Ljoxw561Eic

0 投票
1 回答
39 浏览

javascript - 用于小型显示器的隐藏轮播 < 340 x

请寻找一种方法来隐藏轮播脚本,使其不显示尺寸为 340x360 的屏幕。这里的脚本: http: //owlgraphic.com/owlcarousel/#customizing

提前致谢