• Browsing: »
  • Home
  • »CSS»How to Create Carousels with Bootstrap 3
1 Comment

How to Create Carousels with Bootstrap 3

Posted by Sher Singh on February 25, 2015 in CSS, HTML, JavaScript

Creating Carousels with BootstrapScreenshot3_Bootstrap

The carousels popularly known as slide shows are some of the best ways of showcasing huge amount of contents within a small space on the web pages. It is a dynamic presentation of contents where text and images are made visible or accessible to the user by cycling through several items. The following example will show you how to build a simple carousel like image rotator using Bootstrap carousel plug-in:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

 

 
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" ></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" ></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {width: 100%;}
</style>
</head>
<body>
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-indicators">
<ol>
<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>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
<li data-target="#myCarousel" data-slide-to="5"></li>
</ol>
</div>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="slider/images/slides/20150214095819banner_tr.jpg" />
</div>
<div class="item">
<img src="slider/images/slides/20150214100236slide2.jpg" />
</div>
<div class="item">
<img src="slider/images/slides/20150216065928wurl.jpg" />
</div>
<div class="item">
<img src="slider/images/slides/20150217071010urwl.jpg" />
</div>
<div class="item">
<img src="slider/images/slides/20150220093355Untitled-2 copy.JPG" />
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"></a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"></a>
</div>
<div class="clearfix"></div>
</div>
</body>
</html>
Tags: , , , Permalink

One comment on “How to Create Carousels with Bootstrap 3”

Leave a comment