This example provides a comprehensive analysis of the use of Carousel in Bootstrap for your reference. The specific content is as follows
Source code file:
Carousel.scss
Carousel.js
Implementation principle:
Hide all elements to be displayed, and then specify that the current block to be displayed, width and height adaptable
Source code analysis:
1. Html structure: mainly divided into four parts
1.1. Container: The outermost div, requires a data-ride="carousel" to be specified as a wheel playback plug-in, and provides an Id to facilitate the association of the circle indicator.
1.2. The picture list part is wrapped with an outer div, and then each img will be wrapped with a div, and the class is wrapped by the item.
1.3. Circle indicator: Use an ol list to display its graphic list items. Each list item needs to specify the data-slide-to=”index” attribute, which is used to mark the index number of the current circle.
1.4. Left and left control buttons: realize the function of moving left and right
2. Css style
2.1. Carousel: There is only one relative positioning mark
2.2. Carousel-inner: Rotate the image list area, where each item has an item to modify it
2.2.1. Active, next, and prev are considered visible.
2.2.2. Carousel-caption: It means that each item should have title information, and the default position is displayed.
2.3. Carousel-control: Sets the style of the left and right buttons, which will set information such as gradient and transparency. It provides two additional styles: icon-prev and icon-next.
2.4. Carousel-indicators: The circle part style is absolutely positioned. Each li is set as an inline block element. Use text-indent:-999 to hide the font.
3. Js code
3.1. The main core method is slide, which realizes the switching of pictures
3.1.1. When the image switch is first performed, the pause method will be called to tentatively set the timer. Only after the image switch is completed will the cycle method be called to enable the timer.
3.1.2. Accepted two parameters: type and next
3.1.2.1. Type: means to change pages up or down
3.1.2.2. Next: This time it is displayed as the active Item item. If it is not passed in, you need to use the getItemForDirection method to obtain it.
3.1.3. Get basic parameters such as $active (currently active Item), $next (Item that needs to be an active item), isCycling (timer handle for timer carousel), direction (direction) and other basic parameters
3.1.4, then trigger the slide.bs.carousel event
3.1.5. Then set the index item of indicators
3.1.6. Switch pictures. If you support css animation, use animation to switch. Otherwise, add css directly to switch.
3.1.7. Animation switching principle:
3.1.7.1. Prev: It is a style that will be combined by scrolling the picture to the right: active right (active item) prev right (next item). At this time, prev itself is -100%, put the picture to the leftmost
3.1.7.2. Next: scroll the image to the left, and next left (next item). At this time, next itself is 100%, put the image to the far right.
3.1.7.3. Active right: The picture should be to the right, so it should move 100% of the width of the picture.
3.1.7.4. Active left: The image is to the left, then the image width should be run -100%
3.1.7.5. Comparative picture:
3.1.8. Implementation code (excluding 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 still want to study in depth, you can click here to study and attach 3 exciting topics to you:
Bootstrap learning tutorial
Bootstrap practical tutorial
Bootstrap plug-in usage tutorial
Wonderful topic sharing: jQuery picture carousel JavaScript picture carousel Bootstrap picture carousel
The above is all about this article, I hope it will be helpful for everyone to learn JavaScript programming.