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

owl-carousel-2 - 页面上多个滑块的 Owl Carousel 数据选项

我在这里找到了这段代码:https ://stackoverflow.com/a/32636784/2785140但不幸的是,如果页面包含多个滑块,它就无法正常工作。

html:

如何让它在多个滑块上工作?

提前致谢。

0 投票
3 回答
2629 浏览

javascript - Owlcarousel 2 - translate3d() 时元素不可见

我正在使用 Owlcarousel 2 在多个 div 上滑动,问题是在每个“滑动页面”内部都有一些元素定位为绝对(相对不工作),并且它们在动画时不可见,它们只是“blick- in" 动画结束时。

这就是我的 html 的样子

这是我的 JS 文件

我该怎么做才能使所有元素即使在滑入时也可见(当它们滑出时它可以工作)。它正在使用 Owlcarousel 1。

0 投票
1 回答
1817 浏览

javascript - 猫头鹰轮播 2:背景图片没有及时加载?

我使用 2.0.0b4 创建了一个 Owl Carousel,图像作为 div 中的背景样式,如下所示:

效果很好,OC2 的所有响应特性都运行良好。唯一的麻烦:每次滚动轮播时,图像进入舞台空白,然后一次全部绘制背景。所以你会在加载时得到这个丑陋的闪存(我认为这与延迟加载是分开的)。

当您向前滚动和滚动回您已经看到的 div 时,都会发生这种情况;就好像 div 仅在它们就位并且所有动画都已经发生后才呈现。

想法?

0 投票
1 回答
478 浏览

jquery - jQuery owlCarousel 拖放 Firefox 问题

我使用owlCarousel 2来显示图像,并使用tinymce 4作为所见即所得的编辑器。

当我将图像从轮播拖到FireFox 41.0.2中的 tinyMCE WYSIWIG 编辑器时,我遇到了奇怪的问题。它不只是丢弃图像,而是复制包含图像的轮播的 div。

这是猫头鹰的配置

拖放后 TinyMCE WYSIWIG 中的 HTML

铬合金

火狐

在 Firefox 中查看http://fiddle.tinymce.com/Cifaab/2以获得更多想法。

注意:我没有设置draggable = 'true'轮播图像标签但即使将draggable其设置为true. 有什么建议么?

0 投票
1 回答
1871 浏览

owl-carousel - Owl Carousel 2 - 内联背景图像不起作用

我刚刚下载了 Owl Carousel 2 来创建一个带有内嵌背景图像的轮播。我彻底阅读了以下网址提供的文档:http ://www.owlcarousel.owlgraphic.com/demos/lazyLoad.html

它说:

LazyLoad HTML 结构需要 class="owl-lazy" 和 data-src="url_to_img" 或/和 data-src-retina="url_to_highres_img"。如果您在其他 DOM 元素上而不是在其他 DOM 元素上设置上述设置,则 Owl 会将图像加载到 css 内联背景样式中。

这是我的 JS 初始化:

我的 HTML 代码:

但它没有加载注入到 div 中的图像。我在谷歌上搜索过它,但一切都在脉络中。它现在不起作用,可能是更新失败或其他原因。或者我可能错过了什么?

0 投票
1 回答
734 浏览

javascript - 如何在同一页面中使用两个不同版本的 Owl Carousel?

我想在一个页面上同时使用 owl carousel beta 版和稳定版。有办法吗?

0 投票
1 回答
392 浏览

javascript - OwlCarousel 2.0.0-beta.2.4 - 可以添加项目,但不能使用“add.owl.carousel”附加项目

我正在使用 OwlCarousel 2.0.0-beta.2.4 来显示特定内容类型的所有文章的图像、标题和 dek。这些内容类型可以有数百篇文章。因此,一旦用户到达轮播中的最后一张幻灯片,我将显示前六个,然后延迟加载接下来的六个。

根据Owl Docs,这可以通过触发“add.owl.carousel”事件并指定要添加的项目以及位置来实现。如果将项目添加到位置 0-5,这可以正常工作,但对于位置 6-11 等根本不起作用。我尝试了几种不同的方法,包括addItem()。根据非常有限的文档,这是它应该工作的方式(我认为):

如果我设置var pos = index; ,内容按预期添加到轮播的开头。关于如何让猫头鹰将项目附加到轮播末尾的任何想法?

0 投票
1 回答
2574 浏览

javascript - 将图像 url 动态附加到 owl carousel 2

我已将 owl carousel 2 用于产品滑块。产品是从管理面板添加的,需要在前端显示,包括图像。我可以添加图像并在前面调用它们,但它不适合猫头鹰轮播,这会在网站上造成混乱的外观。如果我直接将它放在图像源中它可以工作,但从 Javascript 调用不起作用。我所需要的只是产品信息和图像应该适合,猫头鹰轮播 2 也应该支持。我正在使用 jquery 2.1.4 和 bootstrap 3。

HTML:

Javascript:

这是jfiddle

0 投票
2 回答
2274 浏览

tabs - Owl carousel v2,如果选项卡内容后面的轮播,项目宽度计算错误

我在一个看起来很完美的页面中构建了 2 个响应式 Owl-carousel-v2。将它们放入选项卡后,第一个轮播可以工作,但选项卡面板后面的轮播失去了它的项目宽度,我无法使其工作。如果我有一定宽度的所有项目,那么所有项目都将垂直列出。

这是我的演示笔: http ://codepen.io/bard/pen/NxqyQy/

我想问题是页面加载时计算项目宽度。

如何解决这个问题?

HTML:

0 投票
1 回答
1341 浏览

twitter-bootstrap - 引导选择在我的表单中显示重复字段

当我单击下一个上一个导航时,引导选择选择器在我的表单中显示重复字段。我正在使用 owl carousel 滑块中的表单。请任何人帮忙,这是猫头鹰轮播问题还是引导问题。我正在使用租它的 html 主题,但主题本身存在问题。引导版本 v1.6.3。