Question

我正在使用AngularJS开发Web应用程序，我要求应该有一个包含图像和视频的图像滑块。

根据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 Code。

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'
});

};

...谢谢

Answer 1

轮播的默认实现是为图像构建的，它不支持任何其他媒体。因此，开箱即用将视频插入到您的轮播中是不可能的。

将视频添加到AngularJs图像滑块（ui.bootstrap.carousel）

1 个答案: