Programming Examples, Portfolio, and More

Home

Using a Bootstrap Carousel for Animation

This example was created using Bootstrap version 3.3.7, and the instructions for downloading and using Bootstrap 3.3.7 can be found at this link.

A description for the carousel can be found at this link.

The carousel animation is made up of two images.

The images are rotated every second using the carousel image. The data-interval property is used to set the interval of the image change. In this case it is set to 1000 which is 1000 milliseconds and equal to one second.

To achieve the look of the carousel below, you must not include the carousel controls or indicators, and you must not include the slide class.

Below is the html code for the carousel.

<div id="divAnimate" class="carousel" data-interval="1000" data-ride="carousel">
    <div class="carousel-inner">
        <div class="item active">
            <div style="width: 100%; height: 270px; display: inline-block; background-image: url('...'); background-repeat: no-repeat;">
            </div>
        </div>
        <div class="item">
            <div style="width: 100%; height: 270px; display: inline-block; background-image: url('...'); background-repeat: no-repeat;">
            </div>
        </div>
    </div>
</div>                

This is a quick and easy to achieve animation in a webpage.

Click here for an animation example using JavaScript.

#HTML #Bootstrap #Carousel