视频轮播滑块

时间:2020-06-12 14:08:23

标签: html jquery css youtube owl-carousel

我是网络开发的新手,请原谅我的新手问题。我一直在尝试为我的6个youtube视频创建一个视频滑块。我搜索了有关该主题的大量文章,论坛和youtube视频,但未能使其正常工作。

我发现创建猫头鹰旋转木马是可行的,但是关于用视频创建猫头鹰的信息不多。通过遵循Owl文档,到目前为止,这是我要提出的:

$(document).ready(function() {
  $(".owl-carousel").owlCarousel();
});

$('.owl-carousel').owlCarousel({
  loop: true,
  margin: 10,
  nav: true,
  responsive: {
    0: {
      items: 1
    },
    600: {
      items: 3
    },
    1000: {
      items: 5
    }
  }
})
.owl-carousel {
  display: flex;
}

.owl-video {
  width: 100%;
  height: auto;
}
<section class="section-video">
  <div class="row">
    <h2>Video ads</h2>
    <p class="long-copy">Our video ad strategies are tested and proven to deliver. Take a look at some of our video ad examples down here.</p>
  </div>
  <div class="owl-carousel">
    <div class="owl-video">
      <iframe width="560" height="315" src="https://www.youtube.com/embed/4oMm2MGIphU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
  </div>
</section>

我不确定为什么不显示视频,什么也没显示。任何帮助/指导将不胜感激,使我走上正确的道路!

谢谢

0 个答案:

没有答案