CODEWITHSUNDEEP
javascriptcssangularjstwitter-bootstrap
Aslam Jiffry
Aslam Jiffry

Reputation: 1316

Add a Video to AngularJs Image Slider (ui.bootstrap.carousel)

I am developing web application using AngularJS and I have a requirement that there should be an Image slider which consists of Images and Videos.

according to sample given in UI Boostrap site, I created an Image slider and it is working perfectly now I want to add YouTube videos to slider (new video slide).

can any body suggest a clue on this...

HTML code.

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

};

Thanks...

Upvotes: 2

Views: 1467

Answers (1)

rushi
rushi

Reputation: 276

The default implementation of the carousel is built for images, it does not support having any other media. So out of the box inserting videos into your carousel is not possible.

Upvotes: 2

Related Questions