Comprehensive Analysis of Bootstrap image carousel effect _ javascript skills

This article describes how to fully parse the Bootstrap image carousel effect. For more information, see I. Structure Analysis

A carousel image consists of three parts:

☑Carousel Images

☑Carousel image counters

☑Controller for carousel Images

Step 1:Design the container for carousel images. In the Bootstrap framework, the carousel style is used and an ID value is defined for the container to facilitate the Declaration and triggering using the data attribute later.

The Code is as follows:

Step 2:Design the carousel image counter. In the container p. the carousel image calculator is added to the caster usel-indicators. Its main function is to display the playing sequence of the current image (several pictures are placed in li ), the following table lists are used to create a sequence:

   
 
 
 
  
  
1
 
  
  
2
 
  
  
3
 
  
  
4
 
  
  
5
 
 

Step 3:Design the carousel image play area. The playing area is the most critical area in the overall effect of a carousel image. This area is mainly used to place images that require carousel. This area is controlled using the movie usel-inner style, and it is also placed in the movie usel container, and each carousel image is placed through the item container:

 
   
 
 
 
  
  
1
...
 
 
 
  
 
  
 
  
...
  
 
　

Step 4:Set the carousel image description. There are many carousel image effects, and each image should have its own title and description content. In fact, the Bootstrap framework also provides similar results. You only need to add the corresponding code at the bottom of the image in item.

 
   
 
 
 
  
  
1
...
 
 
 
  
 
  
   
Image title
Description...
 
 
...

Step 5:Design the carousel image controller. In many cases, carousel images also have a controller for forward and backward playback. In Carousel, the carousel-control style is used in combination with left and right. Left indicates forward playback, and right indicates backward playback. It is also placed in the container usel:

 
   
 
 

  
  
...
 
 
 
  
...
 
        

2. Declarative trigger carousel image playback (JS not required)

 
   
 
 
 
  
  
 
  
  
 
  
  
 
 
 
 
  
 
  
Image Title 1
Description 1...
 
 
 
  
Image Title 2
Description 2...
 
 
 
  
Image Title 3
Description 3...
 
 
 
 
       

The declarative method is implemented by defining the data attribute, which can easily control the carousel position.It mainly includes the following types:
1. data-ride attribute: set the value to usel and define it on usel.
2. data-target attribute: The value is the ID defined by usel or another style identifier, as shown in the previous example. The value is "# slidershow ", and define it on each li of the carousel counter.
3. data-slide attributes: values include prev, next, and prev, which indicate backward scrolling, and next, which indicates forward scrolling. The property value is also defined on the link of the carousel controller, and the Controller href value is set to the ID name of container 4. carousel or another style identifier.
4. data-slide-to attribute: used to pass the subscript of a frame. For example, data-slide-to = "2" can be directly redirected to the specified frame (the subscript starts from 0 ), it is also defined on each li of the carousel counter.
Note that you can add a slide style to the # slidershow layer to ensure smooth switching between images.

 ...

In addition to data-ride = "usel", data-slide, and data-slide-to, the carousel component also supports three other custom attributes:

The following code implements "continuous loop of Carousel" and "The interval between carousel is 1 second ".

 ......

Iii. JavaScript Triggering Method image carousel
HTML:

 
   
 
 
 
  
  
1
 
  
  
2
 
  
  
3
 
 
 
 
  
 
  
Image Title 1
Description 1...
 
 
 
  
Image Title 2
Description 2...
 
 
 
  
Image Title 3
Description 3...
 
 
 
      

JS:

 $(function(){ $("#slidershow").carousel({ interval:2000 }); $("#slidershow a.left").click(function(){ $(".carousel").carousel("prev"); }); $("#slidershow a.right").click(function(){ $(".carousel").carousel("next"); }); });

You can set specific parameters in the carousel () method, such:

When using the plug-in, you can pass related parameters when initializing the plug-in, such:

$("#slidershow").carousel({ interval: 3000});

The pluusel plug-in the Bootstrap framework also provides users with several special calling methods, which are described as follows:

. Cyclusel ("cycle"): loop from left to right;
. Pause usel ("pause"): stops loop playback;
. Repeated usel ("number"): loop to the specified frame. The subscript starts from 0, similar to an array;
. Carousel ("prev"): returns to the previous frame;
. Carousel ("next"): next frame

The above is a detailed introduction to javascript image carousel. I hope this article will help you learn javascript programming.