CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrapcarousel
Pawan Kalyan
Pawan Kalyan

Reputation: 581

Carousel with animated content

For a project work I need to implement a carousel with animated content. I have used bootstrap carousel but it's not working.I suppose it works only with images. I need it with div's which have animated content.

Basically my markup is like this

<div id="myCarousel" class="carousel slide">
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <!-- Carousel items -->
    <div class="carousel-inner">
        <div class="active item">
            <div class="screen" id="screen-1" data-video="vid/scene1.mov"></div>
        </div>
        <div class="item">
            <div class="screen" id="screen-2" data-video="vid/scene2.mov"></div>
        </div>
        <div class="item">
            <div class="screen" id="screen-3" data-video="vid/scene3.mov"></div>
        </div>
        <div class="item">
            <div class="screen" id="screen-4" data-video="vid/scene4.mov"></div>
        </div>
        <div class="item">
            <div class="screen" id="screen-5" data-video="vid/scene5.mov"></div>
        </div>
    </div>
</div>

I have include bootstrap files and started carousel using 

$('.carousel').carousel();

The .mov files contains the animation videos that needs to be displayed one after another . How would i achieve this?

Upvotes: 0

Views: 845

Answers (1)

brrystrw
brrystrw

Reputation: 471

  • Adding videos on carousel

Instead divs, use video tag:

<div id="myCarousel" class="carousel slide">
    <!-- Carousel items -->
    <div class="carousel-inner">
        <div class="active item">
            <video id="video1" width="400" height="200" autoplay controls>
                <source src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" type="video/webm">
            </video>
        </div>
        <div class="item">
            <video id="video2" width="400" height="200" controls>
                <source src="http://video.webmfiles.org/elephants-dream.webm" type="video/webm">
            </video>
        </div>
    </div>
    <!-- Carousel nav -->
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>
  • Playing video one after another

Add a javascript event that checks if the video has ended to be displayed, if yes, goes to the next video and play it. (Don't forget to disable carousel auto-slide).

$('#myCarousel').carousel('pause');

var video1 = document.getElementById("video1");
var video2 = document.getElementById("video2");

video1.onended = function(e) {
    $('#myCarousel').carousel('next');
    video2.play();
}

A sample on jsfiddle

Upvotes: 2

Related Questions