Bootstrap gets the index in the carousel Getactiveindex

Today want to use Bootstrap to do a carousel, when the carousel roll to each picture, the page below to display the corresponding content, then the problem is: I definitely need to know the current activity (display image) index number, then the bootstrap carousel component how to get this index number ~ Check the bootstrap document, and did not see, and read the JS source B, find a Getactiveindex () method, exactly what I need:

------Applies to Bootsrap v3.0.2 Other versions are not deterministic--------

The specific usage is as follows:

1.html code: (as in a Bootsrap document.) ）

<DivID= "Carousel-example-generic"class= "Carousel Slide"Data-ride= "Carousel">                <!--Indicators -                <olclass= "Carousel-indicators">                    <LiData-target= "#carousel-example-generic"data-slide-to= "0"class= "Active"></Li>                    <LiData-target= "#carousel-example-generic"data-slide-to= "1"></Li>                    <LiData-target= "#carousel-example-generic"data-slide-to= "2"></Li>                </ol>                <!--Wrapper for Slides -                <Divclass= "Carousel-inner">                    <Divclass= "Item Active"ID= "T1">                        <imgsrc=".. /imgs/0fool.jpg "alt="...">                        <Divclass= "Carousel-caption">                            <H3>Title 1</H3>                            <P>Para1</P>                        </Div>                    </Div>                    <Divclass= "Item"ID= "T2">                        <imgsrc=".. /imgs/1magician.jpg "alt="...">                        <Divclass= "Carousel-caption">                            <H3>Title 2</H3>                            <P>Para2</P>                        </Div>                    </Div>                    <Divclass= "Item"ID= "T3">                        <imgsrc=".. /imgs/2high-priestess.jpg "alt="...">                        <Divclass= "Carousel-caption">                            <H3>Title 3</H3>                            <P>Para3</P>                        </Div>                    </Div>                </Div>                <!--Controls -                <aclass= "Left Carousel-control"href= "#carousel-example-generic"Data-slide= "Prev">                    <spanclass= "Glyphicon glyphicon-chevron-left"></span>                </a>                <aclass= "Right Carousel-control"href= "#carousel-example-generic"Data-slide= "Next">                    <spanclass= "Glyphicon glyphicon-chevron-right"></span>                </a>            </Div>

2. JS Code:

Listen for Slide.bs.carousel events. Each time the carousel is scrolled, it fires once:

    $ (' #carousel-example-generic '). On (' Slide.bs.carousel ', function () {

var Carouseldata = $ (this). Data (' Bs.carousel ');
var currentindex = Carouseldata.getactiveindex ();//index of the current picture, note: This is not the index number of the next graph
var items = carouseldata. $items;//array of parcel div for all pictures

});

Attention:

(1). This index is starting from 0.

(2). Getactiveindex () Gets the index, which is the current index and is not the index of the next graph: for example, when I slide from the first graph to the second one, the event is triggered and the index is 0.

(3). Items is an array, and the array element is a DIV element with a class of. Item. You can print it out and see

Bootstrap gets the index in the carousel Getactiveindex