Bootstrap Basic Tutorial

Bootstrap Plugin

Bootstrap HTML Coding Standards Bootstrap Collapse Plugin

Bootstrap Carousel (Carousel) plugin

Bootstrap Carousel (Carousel) plugin is a flexible responsive way to add sliders to a site. In addition, the content is also flexible and can be images, embedded frames, videos, or any other type of content you want to place.

If you want to refer to the functionality of this plugin separately, then you need to refer to carousel.js. Or, as Bootstrap Plugin Overview As mentioned in Chapter X, you can refer to bootstrap.js or the compressed version bootstrap.min.js.

Online example

Below is a simple slide that uses the Bootstrap Carousel (Carousel) plugin to display a universal component of a looping element. To implement the carousel, you just need to add the code with this tag. No need to use data attributes, just simple class-based development.

Online example

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap example　-　Simple Carousel (Carousel) plugin</title>
	<link　rel="stylesheet"　href="//cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="//cdn.staticfile.org/jquery/2.1.1/jquery.min.js">/script>
	<script　src="//cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">/script>
</<head>
<body>
<div id="myCarousel" class="carousel slide">
	<!--　Carousel indicators　-->
	<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 items　-->
	<div class="carousel-inner">
		<div class="item active">
			<img src="/run/images/slide1.png" alt="First slide">
		</div>
		<div class="item">
			<img src="/run/images/slide2.png" alt="Second slide">
		</div>
		<div class="item">
			<img src="/run/images/slide3.png" alt="Third slide">
		</div>
	</div>
	<!--　Carousel navigation　-->
	<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
		<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
		<span class="sr-only">Previous</span>
	</a>
	<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
		<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
		<span class="sr-only">Next</span>
	</a>
</div>　
</body>
</html>

Test and see ‹/›

The results are as follows:

optional title

You can use .item within .carousel-caption element adds a title to the slide. Just place any optional HTML here, and it will automatically align and format. The following example demonstrates this:

Online example

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap example　-　The title of the Carousel (Carousel) plugin</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">/script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">/script>
</<head>
<body>
<div id="myCarousel" class="carousel slide">
	<!--　Carousel indicators　-->
	<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 items　-->
	<div class="carousel-inner">
		<div class="item active">
			<img src="/run/images/slide1.png" alt="First slide">
			<div class="carousel-caption">Title　1</div>
		</div>
		<div class="item">
			<img src="/run/images/slide2.png" alt="Second slide">
			<div class="carousel-caption">Title　2</div>
		</div>
		<div class="item">
			<img src="/run/images/slide3.png" alt="Third slide">
			<div class="carousel-caption">Title　3</div>
		</div>
	</div>
	<!--　Carousel navigation　-->
	<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
	　　　　<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
	　　　　<span class="sr-only">Previous</span>
	</a>
	<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
	　　　　<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
	　　　　<span class="sr-only">Next</span>
	</a>
</div>　
</body>
</html>

Test and see ‹/›

The results are as follows:

Usage

Through the data attribute: Using the data attribute can easily control the position of the carousel (Carousel).

attribute data-slide accepts a keyword prev or next, used to change the position of the slide relative to the current position.
Use data-slide-to Pass an original slide index to the carouseldata-slide-to="2" Move the slider to a specific index, counting from 0.
data-ride="carousel" Attribute is used to mark that the carousel should start the animation when the page is loaded.

Through JavaScript: The Carousel can be manually called via JavaScript as shown below:
```
$('.carousel').carousel()
```

Options

Some options are passed through data attributes or JavaScript. The following table lists these options:

Option name	Type/Default value	Data attribute name	Description
interval	number Default value:5000	data-interval	The delay time between automatic looping of each item. If set to false, the carousel will not loop automatically.
pause	string Default value: "hover"	data-pause	Pause the looping of carousel when the mouse enters and resume when the mouse leaves.
wrap	boolean Default value: true	data-wrap	Whether the carousel loops continuously.

Methods

The following are some useful methods in the Carousel plugin:

Methods	Description	Example
.carousel(options)	Initialize the carousel to an optional options object and start looping items.	$('#identifier').carousel({ 　　　　interval:　2000 )
.carousel('cycle')	Loop carousel items from left to right.	$('#identifier').carousel('cycle')
.carousel('pause')	Stop the looping of carousel items.	$('#identifier').carousel('pause')
.carousel(number)	Loop to a specific frame (counting starts from 0, similar to arrays).	$('#identifier').carousel(number)
.carousel('prev')	Loop to the previous item in the carousel.	$('#identifier').carousel('prev')
.carousel('next')	Loop to the next item in the carousel.	$('#identifier').carousel('next')

Online example

The following examples demonstrate the usage of the method:

Online example

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap example　-　Carousel plugin method</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">/script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">/script>
</<head>
<body>
<div id="myCarousel" class="carousel slide">
	<!--　Carousel indicators　-->
	<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 items　-->
	<div class="carousel-inner">
		<div class="item active">
		<img src="/run/images/slide1.png" alt="First slide">
		</div>
		<div class="item">
		<img src="/run/images/slide2.png" alt="Second slide">
		</div>
		<div class="item">
		<img src="/run/images/slide3.png" alt="Third slide">
		</div>
	</div>
	<!--　Carousel navigation　-->
	<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
	　　　　<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
	　　　　<span class="sr-only">Previous</span>
	</a>
	<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
	　　　　<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
	　　　　<span class="sr-only">Next</span>
	</a>
</div>
<!--　control button　-->
<div style="text-align:center;">
	<input type="button" class="btn start-slide"　value="Start">
	
	
	
	Test and see ‹/›

The results are as follows:

Event

The following table lists the events used in the carousel (Carousel) plugin. These events can be used as hooks in functions.

Event	Description	Example
slide.bs.carousel	This event is triggered immediately when the slide example method is called.	$('#identifier').on('slide.bs.carousel', function () { 　　　　//　Perform some actions... )
slid.bs.carousel	This event is triggered when the carousel completes the slide transition effect.	$('#identifier').on('slid.bs.carousel', function () { 　　　　//　Perform some actions... )

Online example

The following example demonstrates the usage of events:

Online example

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap example　-　Carousel plugin event</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">/script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">/script>
</<head>
<body>
<div id="myCarousel" class="carousel slide">
	<!--　Carousel indicators　-->
	<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 items　-->
	<div class="carousel-inner">
		<div class="item active">
			<img src="/run/images/slide1.png" alt="First slide">
		</div>
		<div class="item">
			<img src="/run/images/slide2.png" alt="Second slide">
		</div>
		<div class="item">
			<img src="/run/images/slide3.png" alt="Third slide">
		</div>
	</div>
	<!--　Carousel navigation　-->
	<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
	　　　　<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
	　　　　<span class="sr-only">Previous</span>
	</a>
	<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
	　　　　<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
	　　　　<span class="sr-only">Next</span>
	</a>
</div>　
<script>
	$(function() {
		$('#myCarousel').on('slide.bs.carousel', function () {
			alert("This event is triggered immediately when the 'slide' example method is called.");
		});
	});
</script>
</body>
</html>

Test and see ‹/›

The results are as follows:

Bootstrap HTML Coding Standards Bootstrap Collapse Plugin