A comprehensive analysis of the use of Carousel Carousel in Bootstrap _javascript techniques

The example of this article is a comprehensive analysis of the use of carousel in Bootstrap, for your reference, the specific contents are as follows

Source file:
Carousel.scss
Carousel.js

Implementation principle:
Hides all elements to be displayed, and then specifies the block to display, wide, high adaptive

Source Analysis:
1, HTML structure: mainly divided into four parts
1.1, Container: The outermost div, need a data-ride= "carousel" to specify for the wheel playback plug-in, and provide an ID, Convenient Circle indicator Association
1.2, the Picture List section, with an outer div wrapped all, and then each IMG will be a div, then class for the item's parcel live
1.3, Circle Indicator: With an OL list to display its various graphic list items, each list item needs to specify the data-slide-to= "index" property, used to mark the current Circle index number
1.4, left control button: To move to the left and right function
2, CSS style
2.1, Carousel: Only a relative positioning mark
2.2, Carousel-inner: Rotate the Picture list area, each item has item to decorate
2.2.1, where the active, next, and Prev are considered to be visible
2.2.2, carousel-caption: means that each item item should have header information, the default display is the bottom, the location
2.3, Carousel-control: Set the left, right button style, which will set the gradient, transparency and other information, provides Icon-prev, icon-next two additional styles
2.4, Carousel-indicators: Circle part of the style, are absolute positioning, each Li set as inline block elements, with text-indent:-999 to hide the font
3, JS code
3.1, the main core method for slide, he realized the image of the switch
3.1.1, in the first time when the picture is switched, will call the Pause method to tentatively timer, after the picture switch completes only then calls the cycle method to enable the timer
3.1.2, accepted type and next two parameters
3.1.2.1, Type: To change the page up or down
3.1.2.2, Next: This secondary display is the active item item, and if not passed, the Getitemfordirection method is required to obtain the
Basic parameters such as 3.1.3, getting complete $active (currently active item), $next (item to be active), iscycling (timer handle for timed carousel), direction (direction), etc.
3.1.4, and then triggers the Slide.bs.carousel event
3.1.5, and then set the indicators index entry
3.1.6, toggle picture, if support CSS animation to use animation to switch, otherwise directly add CSS to switch
3.1.7, animation switching principle:
3.1.7.1, Prev: is to scroll the picture to the right, the style that will be combined: active right (active item) Prev (next), when Prev itself is-100%, put the picture on the leftmost
3.1.7.2, Next: Scrolling the picture to the left (active item), next leave (next), when next itself is 100%, put the picture on the far right
3.1.7.3, Active right: The picture should be to the left, that should move the picture width of 100%
3.1.7.4, Active left: picture to the right, that should run the width of the picture-100%
3.1.7.5, contrast chart:

3.1.8, implementation code (does not contain CSS3):

. Carousel-inner > Active,
. Carousel-inner >. Next,
. Carousel-inner > Prev {
 display:block;
}
. Carousel-inner >. active {
 left:0
}
. Carousel-inner > Next,
. Carousel-inner > Prev {
 position:absolute;
 top:0;
 width:100%
}
. Carousel-inner > Next {
 left:100%
}
. Carousel-inner > Prev {left
 : -100%;
}
. Carousel-inner > Next.left,
. Carousel-inner >. prev.right {
 left:0;
}
. Carousel-inner > Active.left {left
 : -100%;
}
. Carousel-inner > Active.right {
 left:100%;
}

If you want to further study, you can click here to learn, and then attach 3 wonderful topics:

Bootstrap Learning Course

Bootstrap Practical Course

Bootstrap Plugin Usage Tutorial

The above is the entire content of this article, I hope to learn JavaScript program to help you.