- SPLessons

Bootstrap Responsive Carousel

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

Bootstrap Responsive Carousel

Bootstrap Responsive Carousel 

Description :

Almost every website having slide show in home page. In this article you will learn how to add a simple silde-show with responsive view (it will fit all the devices like desktops, tablets and smartphones). To add responsive slide-show with help of bootstrap is very simple, follow the below steps to add a beautiful slide-show.

 

Step1 :

Add the below scripts and styles in your project.

  1. bootstrap.min.css
  2. bootstrap-responsive.min.css
  3. jquery-1.8.0.min.js
  4. bootstrap.min.js

Step2 :

Create a file named ‘index.html’ and add below content in that page.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bootstrap Carousel</title>

<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/bootstrap-responsive.min.css" type="text/css" media="screen" />

<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>

<style type="text/css">

.carousel-inner img {
	width:100%;

}

</style>

</head>

<body>

<div class="row-fluid"  >

   <div id="myCarousel" class="carousel slide">
                <ol class="carousel-indicators">
                  <li data-target="#myCarousel" data-slide-to="0" class=""></li>
                  <li data-target="#myCarousel" data-slide-to="1" class=""></li>
                  <li data-target="#myCarousel" data-slide-to="1" class=""></li>
                  <li data-target="#myCarousel" data-slide-to="2" class="active"></li>
                </ol>
                <div class="carousel-inner">
                  <div class="item">
                    <img src="images/image-11.jpg" alt="">

                  </div>

                  <div class="item">
                    <img src="images/image-22.png" alt="">
                  </div>

                  <div class="item">
                    <img src="images/image-11.jpg" alt="">

                  </div>

                  <div class="item active">
                    <img src="images/image-22.png" alt="">

                  </div>

                </div>
                <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
                <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
              </div>

     <!--End Of Carosuel Slide show-->

     </div>  

</body>
</html>

Bootstrap Responsive Carousel example.

Just open the ‘index.html’ in any browser and re-size the window to get responsive slide show.