Home > Article > Web Front-end > How to use bootstrap carousel template (example code)
How to use bootstrap carousel template (example code)
- PHPzOriginal
- 2018-01-18 13:24:512131browse
This article mainly introduces how to use the bootstrap carousel template, which has certain reference value. Interested friends can refer to it. I hope it can help everyone.
The example in this article shares the specific code for the bootstrap carousel template display for your reference. The specific content is as follows
[Related video recommendations: Bootstrap tutorial 】
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" >
<style type="text/css">
.carousel {
height: 500px;
}
.carousel .item {
height: 500px;
background-color: #000;
}
.carousel .item img {
width: 100%;
}
.carousel-caption {
z-index: 10;
}
</style>
</head>
<body>
<!-- 轮播 -->
<p id="ad-carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-slide-to="0" class="active"></li>
<li data-slide-to="1"></li>
<li data-slide-to="2"></li>
</ol>
<p class="carousel-inner">
<p class="item active">
<img src="http://img.glzy8.com/upfiles/www/ppt/jpg/24675.jpg" alt="1 slide">
<p class="container">
<p class="carousel-caption">
文本区域
</p>
</p>
</p>
<p class="item">
<img src="2F1-130516091446402.jpg" alt="2 slide">
<p class="container">
<p class="carousel-caption">
文本区域
</p>
</p>
</p>
<p class="item">
<img src="-110910214P238.jpg" alt="3 slide">
<p class="container">
<p class="carousel-caption">
文本区域
</p>
</p>
</p>
</p>
<a class="left carousel-control" href="#ad-carousel" data-slide="prev"><span
class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#ad-carousel" data-slide="next"><span
class="glyphicon glyphicon-chevron-right"></span></a>
</p>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
</body>
</html>Related recommendations:
js to achieve smooth carousel of the beginning and end of images
Bootstrap image carousel effect implementation method
The above is the detailed content of How to use bootstrap carousel template (example code). For more information, please follow other related articles on the PHP Chinese website!