Bootstrap Carousel

0 4549

Bootstrap carousel is easy to used for banner slider. Now you can easily create slider for your website / web pages through below code. It's fully mobile responsive slider banner, and mainly very interesting thing is almost 90% websites require the slider banner.

As per today generation 60/70% people searches on mobiles, tablets, So responsiveness should be important. So, Bootstrap is very important for all developers/designers to make website/webpages. Use below code and modify as per your need to create or make slider banner for your website.

In below code, you can add more slider banners. You can upload 10/15/20 and more banners as per requirement of your website / webpages.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
<div class="container">
<h1> Bootstrap Carousel slider </h1>
<br/>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!- Indicators ->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"> </li>
<li data-target="#carousel-example-generic" data-slide-to="1"> </li>
</ol>

<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/1250×350">

<div class="carousel-caption">
<h3> Slider One (Title) </h3>
<p> Brief Description of Slider Banner 1 </p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1250×350">

<div class="carousel-caption">
<h3> Slider Two (Title) </h3>
<p> Brief Description of Slider Banner 2 </p>
</div>
</div>
</div>

<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"> </span>
<span class="sr-only"> Next </span>
</a>
</div>
</div>

</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"> </script>
</html>