Home > Article > Web Front-end > Bootstrap image carousel sample code_javascript skills
Bootstrap image carousel sample code_javascript skills
- WBOYOriginal
- 2016-05-16 15:41:241402browse
Example 1:
Insert js and css support:
<link rel="stylesheet" href="css/bootstrap.min.css"/> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/bootstrap.min.js"></script>
HTML code:
<div id="pictures" class="item">
<div id="myCarousel" class="carousel slide">
<!-- 轮播（Carousel）指标 -->
<ol class="carousel-indicators">
<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>
<!-- 轮播（Carousel）项目 -->
<div class="carousel-inner">
<div class="item active">
<img src="images/gf.jpg" class="img-responsive" alt="First slide">
</div>
<div class="item">
<img src="images/psb.jpg" class="img-responsive" alt="Second slide">
</div>
<div class="item">
<img src="images/uyt.jpg" class="img-responsive" alt="Third slide">
</div>
</div>
<!-- 轮播（Carousel）导航 -->
<a class="carousel-control left" href="#myCarousel"
data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel"
data-slide="next">›</a>
</div>
</div>
Example 2:
Usage
<div id="myCarousel" class="carousel slide"> <!-- Carousel items --> <div class="carousel-inner"> <div class="active item">…</div> <div class="item">…</div> <div class="item">…</div> </div> <!-- Carousel nav --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a> </div>
So, you place the items you want to render (such as images) in the "carousel-inner" div in a circular order, creating navigation for the items via "090c33f841bd512936cc04b992121b55" It uses the custom data attribute "data-slide" to navigate to the previous and next items.
You must reference the jquery.js and bootstrap-carousel.js files in the HTML file where you want to create the carousel.
Bootstrap carousel example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Twitter Bootstrap pager with next and previous example</title>
<meta name="description" content="Twitter Bootstrap pager with next and previous example">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
margin: 50px;
}
</style>
</head>
<body>
<ul class="pager">
<li>
<a href="#">Previous</a>
</li>
<li>
<a href="#">Next</a>
</li>
</ul>
</body>
</html>
Page turning example with old and new
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of carousal with Twitter Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Example of carousal with Twitter Bootstrap version 2.0 from w3resource.com">
<!-- Le styles -->
<link href="twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
<link href="twitter-bootstrap-v2/docs/assets/css/example-fixed-layout.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="twitter-bootstrap-v2/docs/examples/images/favicon.ico">
<link rel="apple-touch-icon" href="twitter-bootstrap-v2/docs/examples/images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-114x114.png">
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#"><img src="/images/w3r.png" width="111" height="30" alt="w3resource logo" /></a>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="span4">
<h2>HTML5 and JS Apps</h2>
<p> </p>
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item"><img src="/update-images/html5_logo.png" alt="HTML5 logo" width="500" height="99" /></div>
<div class="item"><img src="/update-images/javascript-logo.png" alt="JS logo" width="500" height="99" /></div>
<div class="item"><img src="/update-images/schema.png" alt="Schema.org logo" width="500" height="99" /></div>
<div class="item"><img src="/update-images/json.gif" alt="JSON logo" width="500" height="99" /></div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
</div>
<hr>
<footer>
<p>© Company 2012</p>
</footer>
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-carousel.js"></script>
</body>
</html>
Use Javascript
You can use the JavaScript code below to create a carousel.
$('.carousel').carousel()
interval: Specifies the waiting time for slide rotation, in milliseconds. The value is of type number and the default value is 5000. If false, the carousel will not automatically start looping.
pause: specifies that when the mouse stays in the slide area, the carousel will be paused, and when the mouse leaves, the carousel will be started. The value is of type string and the default value is 'hover'.
Here are the carousel methods you can use
.carousel(options): 初始化轮播组件，接受一个可选的 object 类型的 options 参数，并开始幻灯片循环。
$('.carousel').carousel({
interval: 2000 // in milliseconds
})
.carousel('cycle'): 从左到右循环各帧。
$('.carousel').carousel('cycle');
.carousel('pause'): 停止轮播。
$('#myCarousel').hover(function () {
$(this).carousel('pause')
}
.carousel(number): 将轮播定位到指定的帧上（帧下标以0开始，类似数组）。
$("#carousel_nav").click(function(){
var item = 4;
$('#home_carousel').carousel(item);
return false;
});
.carousel('next'): Move the carousel to the next frame.
Here are two events used to enhance the functionality of the carousel.
slide: This event is triggered immediately after the slide instance method is called.
slid: This event is triggered after all slides have played.
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
Previous article：jquery simply implements tab menu code with fade effect_jqueryNext article：jquery simply implements tab menu code with fade effect_jquery
Related articles
See more- An in-depth analysis of the Bootstrap list group component
- Detailed explanation of JavaScript function currying
- Complete example of JS password generation and strength detection (with demo source code download)
- Angularjs integrates WeChat UI (weui)
- How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills