Bootstrap is developed by Twitter Inc, and comes with predefined CSS and JavaScript. By using Bootstrap, we can design a very responsive website easily. It is very handy once you understand.
Introduction
Please read
Bootstrap Introduction if you are new to Bootstrap.
We have seen Sliding Images in many websites as because of using JQuery. Bootstrap comes with predefined CSS and JavaScript for the implementation of Sliding Carousels.
Objective
The main objective of this article is to learn creating Sliders using Carousel of Bootstrap.
Using Bootstrap code
There are some predefined classes in
bootstrap.css on behalf of Carousel. We are going to use them to create a Slider. Here, we are not using any Images and so please add below code of styles in your page,
<style>
.item {
background: #333;
text-align: center;
height: 300px !important;
}
h2 {
margin: 0;
color: #888;
padding-top: 100px;
font-size: 50px;
}
</style>In the above style, we are creating an
item with
background and
height that we are going to use as the default Image.
Lets create a Carousel Sliders with the below code,
<div class="thumbnail">
<div id="DemoCarousel" class="carousel slide" data-interval="2000" data-ride="carousel">
<!-- Carousel indicators -->
<ol class="carousel-indicators">
<li data-target="#DemoCarousel" data-slide-to="0" class="active"></li>
<li data-target="#DemoCarousel" data-slide-to="1"></li>
<li data-target="#DemoCarousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<h2>Slide 1</h2>
<div class="carousel-caption">
<h3>This is the First Label</h3>
<p>The Content of the First Slide goes in here</p>
</div>
</div>
<div class="item">
<h2>Slide 2</h2>
<div class="carousel-caption">
<h3>This is the Second Label</h3>
<p>The Content of the second Slide goes in here</p>
</div>
</div>
<div class="item">
<h2>Slide 3</h2>
<div class="carousel-caption">
<h3>This is the Third Label</h3>
<p>The Content of the Third Slide goes in here</p>
</div>
</div>
</div>
<!-- Carousel Controls -->
<a class="carousel-control left" href="#DemoCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#DemoCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>If you observe the above code, we have used different types of Carousel elements such as
carousel slide,
carousel-indicators,
carousel-inner,
carousel-caption and
carousel control.
And also data-interval for setting Duration.
Now run the above code in your browser and you will see the Sliding Carousel something shown in below figure
Using JavaScript:
We can also create the above Sliding Carousel by using JavaScript. For that we have to write little script to set actions as below,
<script type="text/javascript">
$(document).ready(function () {
$("#DemoCarousel").carousel();
//Carousel Controls
$(".left").click(function () {
$("#DemoCarousel").carousel('prev');
});
$(".right").click(function () {
$("#DemoCarousel").carousel('next');
});
//Carousel Indicators
$(".slide-1").click(function () {
$("#DemoCarousel").carousel(0);
});
$(".slide-2").click(function () {
$("#DemoCarousel").carousel(1);
});
$(".slide-3").click(function () {
$("#DemoCarousel").carousel(2);
});
});
</script>In the above script, we have used Carousel functions like
prev,
next, and the numbers that indicates Index of the Slide.
Now, you can add your HTML code like below,
<div id="DemoCarousel" class="carousel slide" data-interval="2000" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li class="slide-1 active"></li>
<li class="slide-2"></li>
<li class="slide-3"></li>
</ol>
<!-- Items -->
<div class="carousel-inner">
<div class="item active">
<h2>Item 1</h2>
<div class="carousel-caption">
<h3>This is the First Label</h3>
<p>The Content of the First Slide goes in here</p>
</div>
</div>
<div class="item">
<h2>Item 2</h2>
<div class="carousel-caption">
<h3>This is the Second Label</h3>
<p>The Content of the Second Slide goes in here</p>
</div>
</div>
<div class="item">
<h2>Item 3</h2>
<div class="carousel-caption">
<h3>This is the Third Label</h3>
<p>The Content of the Third Slide goes in here</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="carousel-control left">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>Now run this combination in your browser to expect the same result like above which looks as
Pause:
There is a pause function for Carousel that is used to pause the sliding motion for a bit.
<script type="text/javascript">
$(document).ready(function () {
$("#DemoCarousel").carousel({
pause: 'hover'
});
});
</script>In the above script, we are setting '
hover' which pauses the Carousel Cycling on Mouse Enter and resumes again on Mouse Leave.
Showing Alert on Sliding:
We can also display an alert message after the completion of sliding. Please look the below script
<script type="text/javascript">
$(document).ready(function () {
$('#DemoCarousel').on('slid.bs.carousel', function () {
alert("Sliding Done");
});
});
</script>slid.bs.carousel is the event that fires after the completion of slide transition and
slide.bs.carousel which fires immediately
slide instance method is invoked.
If you add the above script and run, you will see the output something like below
After the slide transition, it shows JavaScript's alert message.
Button Control Functions of Carousel:
We can also set the buttons to control the Carousel actions. Take a look at the below code and use that in your view,
<script type="text/javascript">
$(document).ready(function () {
$("#DemoCarousel").carousel();
//Carousel Actions
$(".start").click(function () {
$("#DemoCarousel").carousel('cycle');
});
$(".pause").click(function () {
$("#DemoCarousel").carousel('pause');
});
//Carousel Controls
$(".prevSlide").click(function () {
$("#DemoCarousel").carousel('prev');
});
$(".nextSlide").click(function () {
$("#DemoCarousel").carousel('next');
});
//Carousel Indicators
$(".slide-1").click(function () {
$("#DemoCarousel").carousel(0);
});
$(".slide-2").click(function () {
$("#DemoCarousel").carousel(1);
});
$(".slide-3").click(function () {
$("#DemoCarousel").carousel(2);
});
});
</script>The above script demonstrates the Carousel functions that are being used from Bootstrap.
Now HTML as,
<div id="DemoCarousel" class="carousel slide" data-interval="2000" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<h2>Item 1</h2>
<div class="carousel-caption">
<h3>This is the First Label</h3>
<p>The Content of the First Slide goes in here</p>
</div>
</div>
<div class="item">
<h2>Item 2</h2>
<div class="carousel-caption">
<h3>This is the Second Label</h3>
<p>The Content of the Second Slide goes in here</p>
</div>
</div>
<div class="item">
<h2>Item 3</h2>
<div class="carousel-caption">
<h3>This is the Third Label</h3>
<p>The Content of the Third Slide goes in here</p>
</div>
</div>
</div>
</div>
<br />
<!-- Control Buttons -->
<div style="text-align:center;">
<input type="button" class="btn btn-success start" value="Start" />
<input type="button" class="btn btn-danger pause" value="Pause" />
<input type="button" class="btn btn-warning slide-1" value="Slide-1" />
<input type="button" class="btn btn-warning slide-2" value="Slide-2" />
<input type="button" class="btn btn-warning slide-3" value="Slide-3" />
<br />
<ul class="pager">
<li class="prevSlide"><a href="#">Previous</a></li>
<li class="nextSlide"><a href="#">Next</a></li>
</ul>
</div>Run this combination of code to create a beautiful Carousel along with controlling buttons like below,
Conclusion
In this article, we have seen creating Carousels in different ways using Bootstrap. Hope you understand. If you have any doubts in this topic, feel free to ask below.
Thanks for reading.
Regards,
Krishna.