私は動的にOwl Carouselの動画を自分のサイトに追加しようとしていますが、問題が発生しました。ビデオは、ページに表示されますが、私は彼らにコンソールを再生しようとすると、私はフクロウカルーセルのドキュメントhttp://www.owlgraphic.com/owlcarousel/demos/manipulations.htmlと、ここStackOverflowの上でいくつかの記事にある手順に従うことを試みたが、これを把握することはできませんOwl Carousel 2動画を動的に追加する
TypeError: video is undefined
width = video.width || '100%'
を言います。 Owl Carouselで動画を動的に追加する方法については、多くのドキュメントはありません。
私の現在のコードは以下の通りです:
<script>
//init carousel
var owl = $('.owl-carousel');
$(document).ready(function(){
owl.owlCarousel({
touchDrag: true,
startPosition: 1,
merge:true,
margin:10,
video:true,
center:true,
responsive:{
320:{
items:1
},
900:{
items:3
}
}
});
var html = `<div data-merge="1" class="item-video">
<div class="owl-video-wrapper">
<a class="owl-video" href="https://www.youtube.com/watch?v=dOWFVKb2JqM" style="display: none;"></a>
<div class="owl-video-play-icon"></div>
<div class="owl-video-tn" style="opacity:1;background-image:url(http://img.youtube.com/vi/dOWFVKb2JqM/hqdefault.jpg)"></div>
</div>
</div>`;
var content = '<div class="owl-item" data-video="https://www.youtube.com/watch?v=dOWFVKb2JqM">'+html+'</div>';
owl.trigger('add.owl.carousel', [$(content), 0]).trigger('refresh.owl.carousel');
});
</script>
私も、このようにそれらを追加しようとしました:
var content = `<div class="item-video" data-merge="1"><a class="owl-video" href="https://www.youtube.com/watch?v=JpxsRwnRwCQ"></a></div>`;
owl.trigger('add.owl.carousel', [$(content), 0]).trigger('refresh.owl.carousel');
私の考えは、ゴーストCMSのAPIからのビデオのURLを取得し、フクロウカルーセルを開始するために後にありますこのデータを持つ動画これについてのヘルプは高く評価されました!