This article shares the specific code for displaying the effect of the Bootstrap carousel diagram for your reference. The specific content is as follows
Several data-* attributes that need to be used for declarative triggering
-ride: acting on the outermost container, fixed value: carousel
-target: acts on each child element li of class=carousel-indicators, marking the element to be clicked and carousel.
-slide: It is used on the two A links of the front page turn and the back page turn. Prev means the front page turn, and next means the back page turn.
-slide-to: acts on each child element li of class=carousel-indicators, mark the subscript of the corresponding picture animation frame of the corresponding li element, starting from 0
-interval: The waiting time for automatic carousel of rotation of pictures. If false, it will not be automatically carouseled. The default is 5000ms
-pause: Specify whether the mouse stops carousel when staying on the rotation chart, and continues to carousel automatically after leaving
-wrap: Specify whether to continue to carousel
Carousel diagram code implementation:
<!Doctype html>
<html>
<head>
<title>Login interface-bootstrapCreate a front-end--Beautiful and tall-Chengxi production</title>
<!-- meta -->
<meta http-equiv="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- ICON Link -->
<link rel="shorticon" type="image/x-icon" href="Images/" rel="external nofollow" rel="external nofollow" />
<link rel="icon" type='image/x-icon' href="Images/" rel="external nofollow" rel="external nofollow" />
<!--Bootstrap CSS Link-->
<link rel="stylesheet" href="bootstrap/css/" rel="external nofollow" />
<link rel="stylesheet" href="bootstrap/css/" rel="external nofollow" />
<!-- Bootstrap JS and JQuery JS Link -->
<script src="JS/"></script>
<script src="bootstrap/js/"></script>
</head>
<body>
<!-- Making giant screen carousel -->
<div class="carousel" data-ride="carousel" style="background-color: rgba(128, 128, 128, 0.42);margin-top: 10%;width: 100%;height:658px;">
<ol class="carousel-indicators">
<li class="active" data-target="#carouselcontainer" data-slide-to="0"></li>
<li data-target="#carouselcontainer" data-slide-to='1'></li>
<li data-target="#carouselcontainer" data-slide-to="2"></li>
<li data-target="#carouselcontainer" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<img src="Images/" title="Giant Screen Carousel 1" style="width: 100%;height: 658px;" />
</a>
</div>
<div class="item">
<a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<img src="Images/" title="Giant Screen Carousel 2" style="width: 100%;height: 658px;" />
</a>
</div>
<div class="item">
<a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<img src="Images/" title="Giant Screen Carousel 3" style="width: 100%;height: 600px;" />
</a>
</div>
<div class="item">
<a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<img src="Images/" title="Giant Screen Carousel 4" style="width: 100%;height: 600px;" />
</a>
</div>
</div>
<div class="left carousel-control" href="#carouselcontainer" rel="external nofollow" rel="external nofollow" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</div>
<div class="right carousel-control" href="#carouselcontainer" rel="external nofollow" rel="external nofollow" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</div>
</div>
</body>
</html>
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.