owl-carousel 相关问题

猫头鹰轮播在简单的 html 设计中不显示下一个上一个按钮

我在 html 设计中使用 Owl carousel。它工作正常，但不显示下一个和上一个按钮。然后我在页面中添加了按钮，但它仍然没有显示。而且我还实施了...

猫头鹰旋转木马过滤器

向大家问好。 首先，我想指出我们的英语不是很好。 我用猫头鹰旋转木马过滤。我在互联网上找到了代码。我稍微编辑了一下，它正在工作......

需要有关 Owl Carousel 错误的帮助。我该如何解决？寻求故障排除和解决问题的指导

我在 Adobe Dreamweaver 中添加了 Owl Carousel Jquery。它给了我错误。我不认为这是正确的。 ... 我在 Adobe Dreamweaver 中添加了 Owl Carousel Jquery。它给了我错误。我不认为这是正确的。 <div class="slider-area"> <div class="slider-active owl-carousel"> <p>1</p> <p>2</p> <p>3</p> </div> </div> 这里，Jquery 错误。 Jquery哪里出错了？ $(document).ready(function(){ $('.slider-active').owlCarousel({ loop:true, navText:['<i class="fa fa-angle-left"></i>','<i class="fa fa-angle-right"></i>'], nav:true, responsive:[ 0:{ items:1 }, 600:{ items:1 } 1000:{ items:1 } }) }); 您的响应式道具是一个数组。在文档中它是一个对象： responsive:{ 0:{ items:1 }, 600:{ items:3 }, 1000:{ items:5 } }

猫头鹰轮播第一个幻灯片视频完成后，然后开始剩余的滑块图像自动播放

我的问题是使用主页滑块、图像和视频进行猫头鹰狂欢。 所以我们需要第一个滑块来播放视频，视频持续时间为（60秒+）。 完成此视频滑块后，然后

猫头鹰狂欢节中的打字稿视频未播放，仅播放声音，视频屏幕不移动

我已经更新了我之前的问题。我正在尝试使用按钮单击在 Owl Carousal 中播放视频，但它无法正常工作。有些视频正在播放，但大多数时候没有播放。

视频无法从 owl carosal 中的打字稿播放

我正在尝试使用按钮单击在 Owl Carousal 中播放视频，但它无法正常工作。有些视频正在播放，但大多数时候没有播放。通常没有狂欢

我正在尝试使用 [react-owl-carousel] 在控制台中收到警告，但此代码在本地运行正常，但在服务器中运行不正常

/** @格式*/ 从“反应”导入反应； 导入'./Home.css'; 从 'react-owl-carousel' 导入 OwlCarousel;导入 'owl.carousel/dist/assets/owl.carousel.css';导入 'owl.carousel/dist/assets/owl....

为什么猫头鹰轮播无法加载图像

我在我的项目中使用猫头鹰旋转木马，但它不显示图像，也没有幻灯片放映，也许我错过了一些我不知道的东西，但我已经正确加载了所有 JS 和 CSS 文件...

如何更改 ngx-owl-carosel-Angular 中点的颜色和大小？

如何更改 Angular 中 ngx-owl-carousel-o 中点的颜色和大小？我已经尝试了一切，但它不起作用。如何覆盖基本的 owl-carousel 样式？

使用 jQuery '.load()' 获取外部页面内容后，Owl 轮播停止工作

我已经配置了猫头鹰轮播并且它在页面上工作，但是在 .load() 上将相同的内容外部到另一个页面中，它不起作用。我尝试过不同的方法和做法，...

如何修复 Owl Carousel rtl 中的最后一项错误？

我有一个带有猫头鹰旋转木马的滑块，它会导致 rtl 出现错误。当我将 rtl 添加到滑块并到达其中的最后一个项目时，整个滑块将会消失！ 这是代码： var viewportWidth = $("b...

Owl Carousel 加载后立即触发事件

我想知道如何在 Owl Carousel 加载后立即运行函数。我通读了他们的回调函数，但无法看到任何可以直接调用的回调操作...

ajax调用后如何重新初始化Owl Carousel？

我正在尝试在成功的ajax调用后重新初始化猫头鹰轮播。 ajax 调用将更改数据，但视图应保持不变。我遇到一个问题，视图轮播结构 wi...

如何在 Angular 中的 ngx owl 轮播中设置活动且居中的幻灯片样式？

我已经花了几天时间尝试了解如何设计由 Ngx Owl Carousel 结构指令生成的 .active.center 幻灯片的样式。 正如你在下图中看到的，我有一个 .owl-

猫头鹰旋转木马中的空项目

我对猫头鹰旋转木马有疑问。我在 owl 中有 10 个项目，在循环中，在第 10 个项目之后，还有一个额外的空白项目。我怎样才能去掉那个空白项？ 这是我的 owl js 代码： <question vote="10"> <p>我对猫头鹰旋转木马有疑问。我在 owl 中有 10 个项目，在循环中，在第 10 个项目之后，还有一个额外的空白项目。我怎样才能去掉那个空白项？</p> <p>这是我的 owl js 代码：</p> <pre><code>&lt;script type=&#34;text/javascript&#34;&gt; $(document).ready(function() { $(&#34;#owl-example&#34;).owlCarousel({ navigation : false, // Show next and prev buttons pagination : false, loop : true, autoplay : false, slideSpeed : 300, paginationSpeed : 400, items : 1 }); }); &lt;/script&gt; </code></pre> </question> <answer tick="false" vote="7"> <p>我也遇到了同样的问题。经过一些研究和试验，我发现删除 HTML 中的所有空格解决了这个问题。</p> </answer> <answer tick="false" vote="1"> <p>检查css文件是否添加</p> <pre><code> &lt;link rel=&#34;stylesheet&#34; href=&#34;css/owl.carousel.min.css&#34;&gt; &lt;link rel=&#34;stylesheet&#34; href=&#34;css/owl.theme.default.min.css&#34;&gt; </code></pre> </answer> <answer tick="false" vote="0"> <p>我尝试过这个并解决了我的问题。</p> <pre><code>#ba.owl-theme .owl-dots .owl-dot:last-child { display: none; } </code></pre> </answer> <answer tick="false" vote="0"> <p>只需设置 <strong>loop: false</strong> 就可以解决问题了！ 另外，如果您需要循环，请将 <strong>rewind: true</strong> 添加到轮播对象。</p> </answer> <answer tick="false" vote="0"> <p>我也有同样的问题。我通过更改以下脚本的位置来修复它</p> <pre><code>$(document).ready(function() { var owl = $(&#39;#banner&#39;); owl.owlCarousel({ items: 1, loop: true, }); }); </code></pre> <p>最初，该脚本位于主猫头鹰旋转木马 <pre><code>div</code></pre> 内部（外部 <pre><code>div</code></pre> 包含类 <pre><code>.owl-carousel</code></pre> 和 <pre><code>.owl-theme</code></pre>）。</p> <p>现在我把它移到了<pre><code>div</code></pre>的外面。目前它在上述<pre><code>div</code></pre>之后执行。 成功了，问题解决了</p> </answer> <answer tick="false" vote="0"> <p>通过检查元素检查空项目。可能它包含意外的 HTML。就我而言，它是页面中某个位置的其他元素，该结束标记缺少匹配的开始标记。</p> </answer> <answer tick="false" vote="0"> <p>具有 .owl-carousel 类的元素只能是 carousel 项目的父元素。将其他元素（旋转木马项目除外）放入 .owl-carousel 中。</p> </answer> <answer tick="false" vote="0"> <p>将其添加到您的 CSS 中</p> <pre><code>.owl-carousel.owl-loading{opacity:1;} </code></pre> </answer> </body></html>

如何将所有猫头鹰旋转木马项目设置为相等高度？

我正在研究猫头鹰旋转木马，当添加更多内容时，我希望所有项目具有相同的高度，项目高度不相等。我也尝试过使用 Flex 属性，但不明白为什么......

OWL Carousel - 如何先制作最后一张幻灯片 (json)

美好的一天 我正在编辑一个使用猫头鹰旋转木马的项目，当前旋转木马处于随机模式，我想对其进行降序排序，这是代码。 `self.carousel = 函数(){ 设置超时(

当我使用 OwlCarousel 时，没有任何显示

我想使用 OwlCarousel，并且使用了 OwlCarousel 网站内的 js 和 css 文件以及 cdnjs 文件，但是当我添加文件时，没有任何反应。 你能帮我一下吗，在哪里...

在 ngx-owl-carousel-o 中，我的 Angular 应用程序中的嵌入式视频自动退出全屏模式

我正在使用轮播包（ngx-owl-carousel-o）制作视频轮播在我的 component.html 文件中有以下代码： 我正在使用轮播包（ngx-owl-carousel-o）制作视频轮播在我的 component.html 文件中有以下代码： <div class="containers" style="width: 90%; margin: 0 auto; text-align: center;" allowfullscreen="true"> <owl-carousel-o [options]="customOptions" allowfullscreen="true"> <ng-template carouselSlide allowfullscreen="true"> <div class="policy-card" style="padding-top: 20px; padding-bottom: 10px; margin-top: 10px; background: white;" allowfullscreen="true"> <div class="policy-img" style="width: 90%; height: 90%; margin:auto; overflow: hidden;" allowfullscreen="true"> <div class="embed-responsive embed-responsive-16by9" allowfullscreen="true"> <video width="500px" height="500px" class="embed-responsive-item" controls="true"> <source src="assets/demo_rel5.mp4" type="video/mp4" ></video> </div> </div> <h2 style="margin-top:10px; margin-bottom: 0px;"> lorem</h2> </div> </ng-template> <ng-template carouselSlide><div class="policy-card" style="padding-top: 20px; padding-bottom: 10px; margin-top: 10px; background: white;"> <div class="policy-img" style="width: 90%; height: 90%; margin:auto; overflow: hidden;"> <div class="embed-responsive embed-responsive-16by9"> <video class="embed-responsive-item" controls="true" src="assets/demo_rel5.mp4" allowfullscreen ></video> </div> </div> <h2 style="margin-top:10px; margin-bottom: 0px;"> lorem</h2> </div></ng-template> <ng-template carouselSlide><div class="policy-card" style="padding-top: 20px; padding-bottom: 10px; margin-top: 10px; background: white;"> <div class="policy-img" style="width: 90%; height: 90%; margin:auto; overflow: hidden;"> <div class="embed-responsive embed-responsive-16by9"> <video class="embed-responsive-item" controls="true" src="assets/demo_rel5.mp4" allowfullscreen ></video> </div> </div> <h2 style="margin-top:10px; margin-bottom: 0px;"> lorem</h2> </div></ng-template> <ng-template carouselSlide><div class="policy-card" style="padding-top: 20px; padding-bottom: 10px; margin-top: 10px; background: white;"> <div class="policy-img" style="width: 90%; height: 90%; margin:auto; overflow: hidden;"> <div class="embed-responsive embed-responsive-16by9"> <video class="embed-responsive-item" controls="true" src="assets/demo_rel5.mp4" allowfullscreen ></video> </div> </div> <h2 style="margin-top:10px; margin-bottom: 0px;"> lorem</h2> </div></ng-template> </owl-carousel-o> </div> 我的应用程序是旧的并且是用 Angular 7 制作的，所以我使用的是这个轮播的版本 1.2.1. 我在 component.ts 文件中有以下代码： customOptions: any = { loop: true, mouseDrag: true, touchDrag: true, pullDrag: true, dots: false, video:true, navSpeed: 700, navText: ['<i class="fa fa-caret-left"></i>', '<i class="fa fa-caret-right"></i>'], responsive: { 0: { items: 1 }, 400: { items: 2 }, 740: { items: 3 }, 940: { items: 3 } }, nav: true } 旋转木马工作正常，除了当我点击任何视频的全屏时，它进入全屏大约半秒并立即退出全屏模式。 我之前只在视频标签中使用了 allowfullscreen，但为了解决这个问题，我在所有父标签中添加了 allowfullscreen。然而，没有任何帮助。我也尝试更换allowfullscreen 和 allowfullscreen="true" 您也可以在我当前的代码中看到它，但它不起作用

第一元素点击功能在 Owl Carousal 中不起作用

我有一个轮播，是通过猫头鹰轮播集成生成的。这些图像 div 包含两个通过 CSS 动画制作动画的按钮。按钮实际上是 标签。 什么...