Owl 轮播没有响应
Owl Carousel is not responsive
我尝试制作响应式 owl 轮播,但由于某种原因无法正常工作。它适用于图像,但不适用于 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;
}
这就是我想要的样子
但是我的是这样的,不能随浏览器宽度的变化正常调整大小
为什么要将 iframe 放在轮播中。您不喜欢阅读文档? ))) 看这里: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>
我尝试制作响应式 owl 轮播,但由于某种原因无法正常工作。它适用于图像,但不适用于 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;
}
这就是我想要的样子
但是我的是这样的,不能随浏览器宽度的变化正常调整大小
为什么要将 iframe 放在轮播中。您不喜欢阅读文档? ))) 看这里: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>