AngularJs Image Slider（ui.bootstrap.carousel）にビデオを追加

私はAngularJSを使用してWebアプリケーションを開発しています。画像と動画で構成される画像スライダが必要です。AngularJs Image Slider（ui.bootstrap.carousel）にビデオを追加

UI Boostrap siteで与えられたサンプルによれば、私はImageスライダを作成しました。完全に動作しています。今度はYouTubeビデオをスライダ（新しいビデオスライド）に追加したいと思います。

どのボディでもこの手掛かりを示唆することができます。

HTMLコード。

<div ng-controller="homeController"> 
<div style="height: 305px"> 
<div uibcarousel active="active" interval="myInterval nowrap="noWrapSlides"> 
    <div uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id" > 
     <img ng-src=" {{slide.image}}" style="margin: auto;" > 
     <div class="carousel-caption"> 
      <h1>Slide {{slide.MainText}}</h1> 
      <p>{{slide.SubText}}</p> 
     </div> 
    </div> 
</div>

Angularjsコード。

function loagImages(){ 
slides.push({ 
    image: '../../Content/TemplateContents/slider/assets/images/desert.jpg', 
    text: ['Nice image', 'Awesome photograph', 'That is so cool', 'I love that'][slides.length % 4], 
    id: currIndex++, 
    MainText: 'BOOTSTRAP CAROUSEL MAKER', 
    SubText: 'some text' 
}); 
slides.push({ 
    image: '../../Content/TemplateContents/slider/assets/images/jumbotron.jpg', 
    text: ['Nice image', 'Awesome photograph', 'That is so cool', 'I love that'][slides.length % 4], 
    id: currIndex++, 
    MainText: 'MOBILE BOOTSTRAP CAROUSEL', 
    SubText: 'some text' 
}); 
slides.push({ 
    image: '../../Content/TemplateContents/slider/assets/images/man-back.jpg', 
    text: ['Nice image', 'Awesome photograph', 'That is so cool', 'I love that'][slides.length % 4], 
    id: currIndex++, 
    MainText: 'BOOTSTRAP SLIDER MAKER FREE DOWNLOAD', 
    SubText: 'some text' 
});

}カルーセルの

出典

2016-09-27 Aslam Jiffry