Detailed explanation of how to use Bootstrap image carousel component Carousel-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Detailed explanation of how to use Bootstrap image carousel component Carousel

不言

May 05, 2018 pm 04:18 PM

bootstrapInstructions

This article mainly introduces in detail how to use the Bootstrap image carousel component Carousel, which has certain reference value. Interested friends can refer to it

Bootstrap is an open source launched by Twitter Toolkit for front-end development. It was developed by Twitter designers Mark Otto and Jacob Thornton and is a CSS/HTML framework. Bootstrap provides elegant HTML and CSS specifications, which are written in the dynamic CSS language Less. Bootstrap has been very popular since its launch and has been a popular open source project on GitHub, including NASA's MSNBC (Microsoft National Broadcasting Company) Breaking News.

The image carousel component is a very common technology in web pages, but if written directly, it requires a long JavaScript coding and it is difficult to control the size.

If you use Bootstrap to write the image carousel component Carousel, you can save a lot of time.

At the same time, the original meaning of the word Carousel is a merry-go-round.

1. Basic Goal

Write a Carousel component for multiple pictures on a web page. Put the mouse on it and it will have a hover effect, and it will be under each picture. Comes with picture description.

Since the author’s computer video recording software is rather poor, I don’t think it’s necessary to spend too much time on it. I think it’s enough as long as it can explain the problem, so the GIF below is quite discolored, but the basic effect is still a display. Out.

This Bootstrap image carousel component Carousel is not compatible with IE6 and 7. If you need IE6 support, go to the website to download Bootstrap's IE6 component support (click to open the link). At the same time, in Google Chrome, the image file description will have a little black color, but it does not affect browsing:

is displayed differently in different browsers. For IE8, the effect is like this:

2. Basic idea

See the web page layout in the picture below:

3. Production process

#1. Same as the previous "[JavaScript] Use Bootstrap to write a dialog box that pops up on the current web page. It can be closed. No need to Jump, non-pop-up window "The first step

Because you need to use Bootstrap, you can download the components from the official website first. The Bootstrap version used in the production environment is not compatible with Bootstrap 3 and 2. It is recommended to directly use it. The development documentation uses Bootstrap3. This article is also based on Bootstrap3. At the same time, the JavaScript effects provided by Bootstrap 3 need to be supported by jQuery 1.11. You can go to the jQuery official website to download jQuery 1.11 that is compatible with the old browser IE6 (click to open the link), instead of jQuery2 that is not compatible with the old browser IE6. After downloading, configure the site directory. Extract Bootstrap3 directly to the site directory, and put jquery-1.11.1.js into the js directory, which 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 parts are explained part by part:

<!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>图片轮播Carousel</title>
 </head>

 <body>

 <p class="container">
 
 <p class="page-header">
 <h1>
 图片轮播Carousel
 </h1>
 </p>

 <p style="width: 640px; height: 480px; margin-right: auto; margin-left: auto;">

 <p id="carousel" class="carousel slide" data-ride="carousel" data-interval="1000">

 <ol class="carousel-indicators">
 <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
 <li data-target="#carousel-example-generic" data-slide-to="1"></li>
 <li data-target="#carousel-example-generic" data-slide-to="2"></li>
 </ol>

 <p class="carousel-inner" role="listbox">
   
 <p class="item active">
 <a href="images/img0.jpg"><img src="/static/imghwm/default1.png"  data-src="images/img0.jpg"  class="lazy"   alt="img0"></a>
 <p class="carousel-caption">
 <h3>
  img0
 </h3>
 <p>
  我是img0的图片说明
 </p>
 </p>
 </p>
   
 <p class="item">
 <a href="images/img10.jpg"><img src="/static/imghwm/default1.png"  data-src="images/img10.jpg"  class="lazy"   alt="img10"></a>
 <p class="carousel-caption">
 <h3>
  img10
 </h3>
    <p>
  我是img10的图片说明
    </p>
 </p>
 </p>

 <p class="item">
 <a href="images/img2.jpg"><img src="/static/imghwm/default1.png"  data-src="images/img2.jpg"  class="lazy"   alt="img2"></a>
 <p class="carousel-caption">
 <h3>
  img2
 </h3>
 <p>
  我是img2的图片说明
 </p>
 </p>
 </p>

 </p>

 <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
   <span class="glyphicon glyphicon-chevron-left"></span> </a>
 <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
   <span class="glyphicon glyphicon-chevron-right"></span> </a>

 </p>
 </p>
 </p>
 </body>
</html>

(1)

<head>
 <!--声明网页编码，自动适应浏览器的尺寸，要使用bootstrap的css，需要jquery支持，要使用bootstrap的js，标题-->
 <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>图片轮播Carousel</title>
 </head>

(2)

Part

First declare a container container, which can automatically make all elements of the web page Place it in the center of the web page, and then write elements in this container.

First write the page header, declare a page header, and then write a piece of text in it.

 <p class="page-header">
 <h1>
 图片轮播Carousel
 </h1>
 </p>

Then define an unnamed layer p, which is mainly used to standardize the image carousel component. The size of bootstrap's image carousel component cannot be specified by adding width and height parameters to the elements inside it. In this way, the image carousel component will be distorted. At the same time, to center this component, margin-right: auto; margin-left: auto; must be used in the style attribute of p to constrain it. Adding align="center" has no effect at all.

Finally is the detailed description of each part of the picture component:

 <p style="width: 640px; height: 480px; margin-right: auto; margin-left: auto;">
 <!--图片轮播组件的名称为carousel，data-ride元素是bootstrap要求存在的，data-interval的值是每隔1000毫秒，也就是1秒换一张图片，此值太小组件会失真-->
 <p id="carousel" class="carousel slide" data-ride="carousel" data-interval="1000">
 <!--这里定义有几张图片，如果再多一张图片就再下面多加一项，data-slide-to的值加一，首张图片也就是第0张图片必须要有class="active"否则组件无法工作-->
 <ol class="carousel-indicators">
 <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
 <li data-target="#carousel-example-generic" data-slide-to="1"></li>
 <li data-target="#carousel-example-generic" data-slide-to="2"></li>
 </ol>

 <p class="carousel-inner" role="listbox">
   <!--以下是各张的图片的详细编辑，首张图片的class值必须为item active，余下的皆为item-->
 <p class="item active">
    <!--意为点击img0.jpg这张图片就打开img0.jpg的超级链接，如果不需要超级链接，则去掉<a>标签-->
 <a href="images/img0.jpg"><img src="/static/imghwm/default1.png"  data-src="images/img0.jpg"  class="lazy"   alt="img0"></a>
    <p class="carousel-caption">
    <!--图片下的文字说明-->
 <h3>
  img0
 </h3>
 <p>
  我是img0的图片说明
 </p>
 </p>
 </p>
   
 <p class="item">
 <a href="images/img10.jpg"><img src="/static/imghwm/default1.png"  data-src="images/img10.jpg"  class="lazy"   alt="img10"></a>
 <p class="carousel-caption">
 <h3>
  img10
 </h3>
    <p>
  我是img10的图片说明
    </p>
 </p>
 </p>

 <p class="item">
 <a href="images/img2.jpg"><img src="/static/imghwm/default1.png"  data-src="images/img2.jpg"  class="lazy"   alt="img2"></a>
 <p class="carousel-caption">
 <h3>
  img2
 </h3>
 <p>
  我是img2的图片说明
 </p>
 </p>
 </p>

 </p>
 
   <!--这里是组件中向左想右的两个按钮，固定存在的框架代码-->
 <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
   <span class="glyphicon glyphicon-chevron-left"></span> </a>
 <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
   <span class="glyphicon glyphicon-chevron-right"></span> </a>

 </p>
 </p>

Related recommendations:

thinkphp jquery implements image upload and preview effects

The above is the detailed content of Detailed explanation of how to use Bootstrap image carousel component Carousel. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn