This article has shared the specific code of bootstrap carousel 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, user-scalable=no">
<title>XXX</title>
<link rel="stylesheet" href="lib/bootstrap/css/">
<link rel="stylesheet" href="css/">
<!--[if lt IE 9]>
<script src="lib/html5shiv/"></script>
<script src="lib/respond/"></script>
<![endif]-->
</head>
<body>
<!--Carousel
1、Add to the outermost layer ： class="carousel slide"
2、GiveCarousel3The outermost layer of a picturedivAdd to ：class="carousel-inner" Give each picture the fatherdivAdd to class="item"
And the first choice addactive
3、GiveolAdd toclass="carousel-indicators" Then eachliAdd to绑定 data-target="#myCarousel"
data-slide-to=0,1,2 And the first choice addactive
4、Limited width as wide as picture，Give最外层divAdd to style="width: 900px;" （900The width of the picture）
5、Give两边控制按钮的第一个add上：href="#myCarousel" class="left carousel-control" data-slide="prev"
第二个add上 href="#myCarousel" class="right carousel-control" data-slide="next"
-->
<div class="carousel slide" style="width: 900px;">
<!--data-ride="carousel"-->
<!--<div class="carousel slide" style="width: 900px;" data-ride="carousel">-->
<!--Automatic carousel，default5Second-->
<ol class="carousel-indicators"><!--Carousel中间3One dot-->
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner"><!--Carousel3A picture-->
<div class="item active">
<img src="img/" alt="Picture 1">
<div class="carousel-caption"> <!--可以Give轮播图Add to文字-->
<h3>title</h3>
<p>I'm content</p>
</div>
</div>
<div class="item">
<img src="img/" alt="Picture 2">
</div>
<div class="item">
<img src="img/" alt="Picture 3">
</div>
</div>
<!--Carousel两边控制按钮-->
<a href="#myCarousel" class="left carousel-control" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#myCarousel" class="right carousel-control" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<script src="lib/jquery/"></script>
<script src="lib/bootstrap/js/"></script>
<script src="js/"></script>
<script>
// $('#myCarousel').carousel();/*Automatic carousel, default 5 seconds*/
$('#myCarousel').carousel({
interval:3000 , /* Set automatic carousel time*/
pause:'hover',/*Set the pause event. By default, the mouse will pause when the carousel image is moved into, and the moving out continues, so you don't need to write */
/*wrap:false*/ /*Play only once, default true, looping and carousel*/
});
/*Other methods
* cycle loops each frame (default from left to right)
pause stops carousel
number carousels onto the specified image (subscript starts at 0, similar to array)
prev loop to the previous project
next loop carousel to the next project
*
*
* //Click the button to execute
$('button').on('click', function () {
//After clicking, it will automatically play
$('#myCarousel').carousel('cycle');
//Other similarities
}
* */
//event$('#myCarousel').on('', function () {
alert('Flashed immediately when the slide instance mode is called');
});
$('#myCarousel').on('', function () {
alert('When the carousel completes a slide trigger');
});
</script>
</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.