添加視頻到AngularJs圖像滑塊（ui.bootstrap.carousel）

我正在開發使用AngularJS的web應用程序，我有一個要求，應該有一個圖像滑塊，其中包含圖像和視頻。添加視頻到AngularJs圖像滑塊（ui.bootstrap.carousel）

根據UI Boostrap site中給出的示例，我創建了一個圖像滑塊，現在它完美地工作，現在我想將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