Using Bootstrap to write Carousel image carousel can save a lot of time. Image carousel is a common technology in web pages, but if written directly, it requires a long JavaScript encoding, and it is not easy to control the size.
Let me also say that the original meaning of the word Carousel is a merry-go-round horse.
1. Basic Objectives
Carousel for writing multiple pictures on the web page, the mouse is placed on it and the image description is provided below each picture.
Since the author's computer video recording software is quite bad, he also feels that there is no need to draw too much time on it. He thinks that as long as it can explain the problem, the GIF below is more color-loss, but the basic effect is still shown.
Carousel, the picture carousel component of Bootstrap, is not compatible with IE6 and 7. If IE6 support is required, you need to download Bootstrap's IE6 component support from this website (click to open the link). At the same time, the image file description in Google Chrome will seep a little black, but it will not affect browsing:
The presentation situations in different browsers are different. IE8's effect is like this:
2. Basic ideas
See the page layout of the following image:
3. Production process
1. The first step in the previous "Bootstrap to write a dialog box that can be closed on the current web page" (click to open the link)
Because you need to use Bootstrap, you can download the components on the official website (click to open the link). The Bootstrap version used in the production environment is not compatible with 2. It is recommended to use Bootstrap3 directly according to its development documents. This article is also made based on Bootstrap3. At the same time, the JavaScript effect provided by Bootstrap3 needs to be supported in jQuery 1.11 (click to open the link). You can download jQuery 1.11 compatible with the old browser IE6 from the official website of jQuery, rather than jQuery2 incompatible with the old browser IE6. After downloading, configure the site directory. Decompress Bootstrap3 directly to the site directory, and place jquery-1.11.1.js in the js directory, that is, the same directory as bootstrap.js. The structure of the site folder is roughly as follows:
2. The following is the full code of the web page, and the following part will be explained:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> <link href="css/bootstrap.css" rel="stylesheet" media="screen"> <script type="text/javascript" src="js/jquery-1.11.1.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script> <title>Picture Carousel</title> </head> <body> <div> <div> <h1>Picture Carousel</h1> </div> <div> <div id="carousel" data-ride="carousel" data-interval="1000"> <ol> <li data-target="#carousel-example-generic" data-slide-to="0"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <div role="listbox"> <div> <a href="images/img0.jpg"><img src="images/img0.jpg"></a> <div> <h3> img0 </h3> <p> Image description of I am img0</p> </div> </div> <div> <a href="images/img10.jpg"><img src="images/img10.jpg"></a> <div> <h3> img10 </h3> <p> Image description of I am img10</p> </div> </div> <div> <a href="images/img2.jpg"><img src="images/img2.jpg"></a> <div> <h3> img2 </h3> <p> Image description of I am img2</p> </div> </div> <a href="#carousel-example-generic" role="button" data-slide="prev"> <span></span> </a> <a href="#carousel-example-generic" role="button" data-slide="next"> <span></span> </a> </div> </div> </div> </body></html>
(1) <head> part
<head> <!--Declare web encoding, automatically adapt to the browser size. To use bootstrap's css, jquery support is required. To use bootstrap's js, title--> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> <link href="css/bootstrap.css" rel="stylesheet" media="screen"> <script type="text/javascript" src="js/jquery-1.11.1.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script> <title>Picture Carousel</title> </head>
(2) <body> part
First declare a container container, which can automatically make all elements of the web page belong to the center of the web page, and then write elements in this container.
First write the header, declare a header, and then write a piece of text inside it.
<div> <h1> Picture Carousel </h1> </div>
Then define an unnamed layer div, which is mainly used to standardize image carousel components. The size of the bootstrap image carousel component cannot be specified for the elements inside it, and width and height parameters are added. This way the picture carousel component will be distorted. At the same time, to center this component, you must use margin-right: auto; margin-left: auto; in the style attribute of the div to constrain. The additional align="center" has no effect at all.
Finally, there are detailed descriptions of each part of the picture component:
<div> <!--The name of the picture carousel component is carousel, and the data-ride element is required by bootstrap. The value of data-interval is to change the image every 1000 milliseconds, that is, 1 second. If this value is too much, the component will be distorted--> <div id="carousel" data-ride="carousel" data-interval="1000"> <!--There are several pictures defined here. If there is one more picture, add one more item below. The value of data-slide-to is added one. The first picture, that is, the 0th picture must have class="active" otherwise the component will not work--> <ol> <li data-target="#carousel-example-generic" data-slide-to="0"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <div role="listbox"> <!--The following are detailed edits of each picture. The class value of the first picture must be item active, and the rest are item--> <div> <!--It means that click on the image img0.jpg to open the hyperlink of img0.jpg. If there is no hyperlink, remove the <a> tag--> <a href="images/img0.jpg"><img src="images/img0.jpg"></a> <div> <!--Text description under the picture--> <h3> img0 </h3> <p> Picture description of I am img0</p> </div> </div> <div> <a href="images/img10.jpg"><img src="images/img10.jpg"></a> <div> <h3> img10 </h3> <p> Picture description of I am img10</p> </div> </div> <div> <a href="images/img2.jpg"><img src="images/img2.jpg"></a> <div> <h3> img2 </h3> <p> Picture description of I am img2</p> </div> </div> </div> <!--Here are two buttons in the component that think left and right, fixed frame code--> <a href="#carousel-example-generic" role="button" data-slide="prev"> <span></span> </a> <a href="#carousel-example-generic" role="button" data-slide="next"> <span></span> </div> </div>
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
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.