问题标签 [owl-carousel]

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 投票
2 回答
615 浏览

jquery - Jquery 菜单 - 使用哈希链接控制轮播

我设置了一个 mmenu - 但是当它们位于菜单的列表项中时,它似乎忽略了所有哈希链接(#one、#teo 等)。

我希望能够从 mmenu 控制轮播。

如果我将它们从列表项中取出,它们可以工作,但是 mmenu 的格式会丢失,并且 mmenu 在单击后不再关闭!

见演示: http ://demo.tyga.co.uk/easyjet/index.htm

是否有允许菜单中的哈希 URL 将轮播幻灯片向前移动的选项?

谢谢安迪

0 投票
2 回答
97 浏览

meteor - 为什么 Iron-router 不渲染轮播?

当我这样制作时,它可以完美运行

但是当我使用 Iron-router 渲染模板时;它不会呈现轮播

0 投票
1 回答
9059 浏览

jquery - Owl-carousel responsive crop width on resize jquery css

I'm using owl carousel to create a gallery carousel/slide show on our main page. http://owlgraphic.com/owlcarousel/

But we want it to be responsive but not resize the image, instead crop the width equally up to a certain maximum "crop amount". Here is the code so far.

I've tried targeting my carousel div #home-carousel, all the wrappers, items, img, none of them seem to work as I want, there is always overlapping images or this white block on the right of the page (because the image is moving to the left) One thing that worked was making #home-carousel div have a very high width like 10,000 but that is not good because of the horizontal scrollbar that will appear on the page.

Maybe there is a much simpler way to do this?

EDIT: moving the img works best so far, while sizing down, but while sizing up you can see overlapping images. This may be due to "refresh rate" or how often the resize event is triggered. I'm thinking i'll need to manually hide items and show current one only. Any other solution is welcome.

0 投票
2 回答
4318 浏览

jquery - 显示 owl carousel 2 或以前版本中的所有项目

演示猫头鹰旋转木马 2

猫头鹰旋转木马 2 网站

我需要添加按钮“查看全部”,但它是如何制作的?

现在它只是一个轮播代码:

0 投票
1 回答
1863 浏览

jquery - Owl Carousel YouTube 视频无法在 iOS(iPad 和 iPhone)上播放

我正在使用 owl carousel 并且喜欢它,它工作得很好,但是当我点击红色播放按钮时,我似乎无法播放嵌入的 Youtube 视频。Vimeo 视频工作得很好。

示例网址:

http://dx1showroom.azurewebsites.net/details-images-v2.html

HTML:

Javascript:

0 投票
1 回答
974 浏览

jquery - Owl Carousel - 谷歌分析跟踪

我使用猫头鹰轮播作为单页网站,每一页内容都在全屏轮播幻灯片上。我希望能够使用 Google Analytics 将每张幻灯片作为虚拟 PageView 进行跟踪 - 但我无法解决。下面是我的上一个和下一个按钮的代码 - 但问题是用户也可以在触摸设备上“滑动” - 所以我需要能够跟踪两者 - 我从哪里开始!?

谢谢你提供的所有帮助!!

0 投票
1 回答
5029 浏览

css - 位置:使用 HTML5 视频标签修复 z-index 错误

我在 Chrome 中有一个奇怪的错误,我的固定导航下拉菜单在悬停时没有正确显示在 HTML5 视频标签上。如果您检查 Firefox,它工作得非常好,但 Chrome 似乎使它不可见,同时仍可点击。我已经尝试了多种可能的解决方案,从下拉和视频的 -webkit-backface-visibility 以及旧的 Flash/YouTube 嵌入解决方案上的可能的 wmode=transparent 属性,但没有任何效果。

问题可以查看:

http://spencerfink.net/capers/

注意:我的导航和下拉菜单必须是 position:fixed 以使它们始终保持在页面顶部,无论用户滚动到哪里。位置:元素的绝对或相对变化不符合我的需求。

我可以让下拉菜单出现在 Chrome 中的唯一方法是将包含视频的#banner div 更改为 -1 的 z-index,但这会干扰我在页面底部的“联系我们”汇总部分等等z-index shuffle 最终将导航栏从页面顶部的固定位置分离。

这个问题也发生在 Owl Carousel 的页面上,但我认为解决方案是相似或相同的。

冲突区域的 HTML

相关 CSS

非常感谢您的帮助,我一直在网上寻找答案!

0 投票
1 回答
2166 浏览

javascript - 使用 owl carousel 和 Bootstrap 3 将图像的宽度和高度居中

我正在尝试结合使用引导程序和猫头鹰轮播来实现响应式图片库浏览体验。我有一个固定高度的固定页眉和一个固定高度的固定页脚。

我的目标是让滑块中的图像始终位于页脚页眉的中心,尽管图像的高度。有没有一种简单的方法可以在页脚和页眉之间制作某种类型的动态容器来完成这个,或者可能是一些漂亮的 java 脚本来调整图像的大小?(请记住,该解决方案也需要在移动设备上运行)

这是我的 jsfiddle 示例 http://jsfiddle.net/Tenacity/GMu2x/

我的脑海里正在想类似的事情

我认为 xx 是根据屏幕高度和宽度动态计算的

如果您查看我的示例,我目前仅使用 margin-top css 属性使图像全部从顶部从左到右滚动约 60px,我当然会从顶部使用更好的解决方案将其删除,但我想实现死点图像一直被查看。

提前致谢

0 投票
1 回答
7582 浏览

javascript - Owl Carousel.js 和 Bootstrap 主题

我正在使用 Bootstrap Freelance 主题 ( http://startbootstrap.com/templates/freelancer/ ) 并希望合并 Own Carousel.js ( http://www.owlcarousel.owlgraphic.com/demos/basic.html )。

我想单击一个图像,并在模式窗口中打开它,然后能够在图像之间向左/向右滚动。

除了最初打开非常小的图像之外,一切似乎都在工作,直到我调整窗口大小然后繁荣 - 很好!似乎在模态窗口的初始加载时发生了一些事情,但是当我对窗口大小进行任何更改时,例如按 F12(对于开发工具),图像然后调整大小并且看起来很好。有什么建议么?这可能是css或js问题吗?

我的html

可能与另一个js文件冲突吗?

我在标签之前包含了以下 js 文件</head>- 它们的顺序是否正确?

按顺序排列的 CSS 文件;

感谢您的任何帮助或建议。

0 投票
2 回答
541 浏览

javascript - 将 javascript 变量传递给 jQuery 插件初始化函数

我正在使用 jQuery 插件“Owl Carousel”,当我尝试使用 javascript 变量作为选项值初始化插件时,我遇到了一个奇怪的问题。

基本上我有以下几点:

这不起作用,并且 itemCustom 的值未正确传递给 reinit 函数。但是,如果我手动输入 itemCustom 的值,则可以根据需要完成工作。对于两个图像,例如

谁能帮我解决这是为什么?使用 javascript 调试,我可以看到 thumbnail_breakpoints 肯定设置正确。此外,如果我更改 switch case 语句,以便每个语句直接使用所需的值调用 jQuery 函数,它就可以正常工作,但这是代码的大量重复。

提前感谢您的帮助。

PS这是在prototypejs中,因此为什么在无冲突模式下调用jQuery。