猫头鹰旋转木马没有响应答案

【问题标题】：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 width="560" height="315" 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 width="560" height="315" 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 width="560" height="315" 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 width="560" height="315" 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 width="560" height="315" 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 width="560" height="315" 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 width="560" height="315" 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 width="560" height="315" 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 width="560" height="315" 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 width="560" height="315" 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>

JavaScript

<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很难说

标签： javascript html css responsive-design owl-carousel

【解决方案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 你的轮播在哪里吗？
我能够解决我的问题！我认为执行文件时出了点问题，但是当我托管网站时，视频显示得很好。感谢您的帮助！