猫头鹰旋转木马没有响应
Posted
技术标签:
【中文标题】猫头鹰旋转木马没有响应【英文标题】:Owl Carousel is not responsive 【发布时间】:2021-10-20 03:50:24 【问题描述】:我试图制作一个响应式猫头鹰轮播,但由于某种原因它无法正常工作。它适用于图像,但不适用于 Youtube 视频。有人可以帮我吗?
<div id="owl-demo" class="owl-carousel owl-theme">
<div class = "item"><iframe src="https://www.youtube.com/embed/WZwr2a_lFWY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div class = "item"><iframe src="https://www.youtube.com/embed/dLymsYC7Kmo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div class = "item"><iframe src="https://www.youtube.com/embed/M46FRJsB0Qw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div class = "item"><iframe src="https://www.youtube.com/embed/6eEZ7DJMzuk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div class = "item"><iframe src="https://www.youtube.com/embed/nRYCLOTRAK4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div class = "item"><iframe src="https://www.youtube.com/embed/eDEFolvLn0A" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div class = "item"><iframe src="https://www.youtube.com/embed/nnVjsos40qk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div class = "item"><iframe src="https://www.youtube.com/embed/QqsvrV1_XEA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div class = "item"><iframe src="https://www.youtube.com/embed/G8GaQdW2wHc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div class = "item"><iframe src="https://www.youtube.com/embed/0nPlIi685DU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
</div>
<script type = "text/javascript">
$(document).ready(function()
$("#owl-demo").owlCarousel(
navigation : true,
autoWidth: true,
loop: true,
responsiveClass: true,
center: true,
merge: true,
responsive:
0:
items: 1
,
600:
items: 2
,
900:
items: 3
);
);
</script>
CSS
#owl-demo .item
margin: 10px;
border-radius: 3px;
这就是我想要的样子
但是我的就是这样,没有随着浏览器宽度的变化而正确调整大小
【问题讨论】:
project owl carousel 大约在 2 年前关闭,他们没有创建任何更新/错误修复 you can check it 最好不要使用它。你可以找到很多不错的滑块(swiperjs - 在原生 js 上,slick - jQuery,检查 npm trends) 您指定媒体查询(600px,900px)并更改要显示的项目数,但在您的 gif 中它应该始终为 1。您得到了预期的结果(您自己在代码中指出)跨度> @Greg--但是屏幕低于600px时项目数不应该是1吗? 没有sn-p很难说 【参考方案1】:你为什么把 iframes 放在 corousel 中。你不喜欢阅读文档? ))) 看这里:https://owlcarousel2.github.io/OwlCarousel2/demos/video.html
要将视频添加到轮播中,只需输入<a class="owl-video" href="_straight URL from YouTube, Vimeo, or vzaar"></a>
。
好的,试试这个:
<div id="owl-demo" class="owl-carousel owl-theme">
<div class="item-video"><a class="owl-video" href="https://youtu.be/WZwr2a_lFWY"></a></div>
<div class="item-video"><a class="owl-video" href="https://youtu.be/dLymsYC7Kmo"></a></div>
<div class="item-video"><a class="owl-video" href="https://youtu.be/M46FRJsB0Qw"></a></div>
<div class="item-video"><a class="owl-video" href="https://youtu.be/nRYCLOTRAK4"></a></div>
<div class="item-video"><a class="owl-video" href="https://youtu.be/eDEFolvLn0A"></a></div>
<div class="item-video"><a class="owl-video" href="https://youtu.be/nnVjsos40qk"></a></div>
<div class="item-video"><a class="owl-video" href="https://youtu.be/QqsvrV1_XEA"></a></div>
<div class="item-video"><a class="owl-video" href="https://youtu.be/G8GaQdW2wHc"></a></div>
<div class="item-video"><a class="owl-video" href="https://youtu.be/0nPlIi685DU"></a></div>
</div>
这个:
<script type = "text/javascript">
jQuery(document).ready(function($)
$("#owl-demo").owlCarousel(
navigation : true,
loop: true,
center: true,
merge: true,
video:true,
responsive:
0:
items: 1
,
600:
items: 2
,
900:
items: 3
);
);
</script>
还有这个:
<style>
.item-video height: 300px;
</style>
这里的结果:https://view.abramovaleksandr.com/
【讨论】:
我之前也做过同样的事情,但是由于某种原因视频没有出现,所以我不得不求助于使用 iframe:/ 答案已更新。我添加了一些代码。那里有你的视频网址。视频没有出现不是出于某种原因)))原因是 - 您没有阅读所有文档)) 我再次尝试了这个,就像你做的那样,但是它显示一个带有播放按钮而不是视频缩略图的黑屏。视频也无法播放。 我添加的所有代码都在这里实现:view.abramovaleksandr.com 你可以看到它的工作。可能是你有控制台错误?你能显示 url 你的轮播在哪里吗? 我能够解决我的问题!我认为执行文件时出了点问题,但是当我托管网站时,视频显示得很好。感谢您的帮助!以上是关于猫头鹰旋转木马没有响应的主要内容,如果未能解决你的问题,请参考以下文章