This article shares the implementation code of Bootstrap carousel diagram for your reference. The specific content is as follows
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap template</title>
<link href="lib/bootstrap/css/" rel="stylesheet">
<!--[if lt IE 9]>
<script src="///html5shiv/3.7.2/"></script>
<script src="////1.4.2/"></script>
<![endif]-->
<style>
img {
width: 100%;
height: 100%;
}
p {
text-align: center;
}
</style>
</head>
<body>
<!-- Carousel picture part -->
<div class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<!-- Indicator -->
<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>
<!-- Wrapper for slides -->
<!-- Package slideshow -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/carousel" alt="Caropus 1">
<div class="carousel-caption">
Carousel1
</div>
</div>
<div class="item">
<img src="images/carousel" alt="Caropus 2">
<div class="carousel-caption">
Carousel2
</div>
</div>
<div class="item">
<img src="images/carousel" alt="Caropus 3">
<div class="carousel-caption">
Carousel3
</div>
</div>
<p>Carousel尝试</p>
</div>
<!-- Controls -->
<!-- control -->
<!-- Swipe left -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="false"></span>
<span class="sr-only">Previous</span>
</a>
<!-- Swipe right -->
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- jscontrolCarousel -->
<button >forward</button>
<button >backward</button>
<button >stop</button>
<button >start</button>
<button >To the second one</button>
<script src="lib/jquery/"></script>
<script src="lib/bootstrap/js/"></script>
<!-- Carousel还支持jscontrol -->
<script>
$(function(){
$('.carousel').carousel({
interval: 2000,//Carousel interval pause:"hover", //Hoom the mouse over the carousel, whether to stop scrolling wrap:true, //
keyboard:true //Respond to keyboard events });
$("#prev").click(function(event) {
$('.carousel').carousel('prev')// Cycle last project. });
$("#next").click(function(event) {
$('.carousel').carousel('next')// Cycle to the next project. });;
$("#pause").click(function(event) {
$('.carousel').carousel('pause')// Stop the conveyor belt from the project cycle. });;
$("#start").click(function(event) {
$('.carousel').carousel('cycle')// Project cycle through conveyor belt from left to right. });;
$("#jump").click(function(event) {
$('.carousel').carousel(1)// Looping conveyor to a specific frame (mainly 0, similar to an array). });;
});
</script>
</body>
</html>
If you want to learn more, you can clickhereLet’s study and attach 3 exciting topics to you:
Bootstrap learning tutorial
Bootstrap practical tutorial
Bootstrap Table usage tutorial
Bootstrap plug-in usage tutorial
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.