Skip to content

Instantly share code, notes, and snippets.

@a9un9hari

a9un9hari/index.html

Created November 19, 2014 13:10
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save a9un9hari/cbc57c6958a31f3deb8b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save a9un9hari/cbc57c6958a31f3deb8b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<style>
.carousel-indicators {
bottom: -60px;
}
.carousel-indicators li{
background: grey;
}
.carousel-indicators li.active{
background: red;
}
</style>
<body>
<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>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="row">
<div class="col-lg-2">
<img class="img-circle img-responsive center-block" alt="140x140" src="http://lorempixel.com/140/140/nature">
<h2 class="text-center">Heading</h2>
</div>
<div class="col-lg-2">
<img class="img-circle img-responsive center-block" alt="140x140" src="http://lorempixel.com/140/140/transport">
<h2 class="text-center">Heading</h2>
</div>
<div class="col-lg-2">
<img class="img-circle img-responsive center-block" alt="140x140" src="http://lorempixel.com/140/140/business">
<h2 class="text-center">Heading</h2>
</div>
<div class="col-lg-2">
<img class="img-circle img-responsive center-block" alt="140x140" src="http://lorempixel.com/140/140/transport">
<h2 class="text-center">Heading</h2>
</div>
<div class="col-lg-2">
<img class="img-circle img-responsive center-block" alt="140x140" src="http://lorempixel.com/140/140/business">
<h2 class="text-center">Heading</h2>
</div>
<div class="col-lg-2">
<img class="img-circle img-responsive center-block" alt="140x140" src="http://lorempixel.com/140/140/business">
<h2 class="text-center">Heading</h2>
</div>
<div class="col-lg-2">
<img class="img-circle img-responsive center-block" alt="140x140" src="http://lorempixel.com/140/140/nature">
<h2 class="text-center">Heading</h2>
</div>
<div class="col-lg-2">
<img class="img-circle img-responsive center-block" alt="140x140" src="http://lorempixel.com/140/140/transport">
<h2 class="text-center">Heading</h2>
</div>
<div class="col-lg-2">
<img class="img-circle img-responsive center-block" alt="140x140" src="http://lorempixel.com/140/140/business">
<h2 class="text-center">Heading</h2>
</div>
<div class="col-lg-2">
<img class="img-circle img-responsive center-block" alt="140x140" src="http://lorempixel.com/140/140/transport">
<h2 class="text-center">Heading</h2>
</div>
<div class="col-lg-2">
<img class="img-circle img-responsive center-block" alt="140x140" src="http://lorempixel.com/140/140/business">
<h2 class="text-center">Heading</h2>
</div>
<div class="col-lg-2">
<img class="img-circle img-responsive center-block" alt="140x140" src="http://lorempixel.com/140/140/business">
<h2 class="text-center">Heading</h2>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-lg-2">
<img class="img-circle img-responsive center-block" alt="140x140" src="http://lorempixel.com/140/140/nature">
<h2 class="text-center">Heading</h2>
</div>
<div class="col-lg-2">
<img class="img-circle img-responsive center-block" alt="140x140" src="http://lorempixel.com/140/140/transport">
<h2 class="text-center">Heading</h2>
</div>
<div class="col-lg-2">
<img class="img-circle img-responsive center-block" alt="140x140" src="http://lorempixel.com/140/140/business">
<h2 class="text-center">Heading</h2>
</div>
<div class="col-lg-2">
<img class="img-circle img-responsive center-block" alt="140x140" src="http://lorempixel.com/140/140/transport">
<h2 class="text-center">Heading</h2>
</div>
<div class="col-lg-2">
<img class="img-circle img-responsive center-block" alt="140x140" src="http://lorempixel.com/140/140/business">
<h2 class="text-center">Heading</h2>
</div>
<div class="col-lg-2">
<img class="img-circle img-responsive center-block" alt="140x140" src="http://lorempixel.com/140/140/business">
<h2 class="text-center">Heading</h2>
</div>
<div class="col-lg-2">
<img class="img-circle img-responsive center-block" alt="140x140" src="http://lorempixel.com/140/140/nature">
<h2 class="text-center">Heading</h2>
</div>
<div class="col-lg-2">
<img class="img-circle img-responsive center-block" alt="140x140" src="http://lorempixel.com/140/140/transport">
<h2 class="text-center">Heading</h2>
</div>
<div class="col-lg-2">
<img class="img-circle img-responsive center-block" alt="140x140" src="http://lorempixel.com/140/140/business">
<h2 class="text-center">Heading</h2>
</div>
<div class="col-lg-2">
<img class="img-circle img-responsive center-block" alt="140x140" src="http://lorempixel.com/140/140/transport">
<h2 class="text-center">Heading</h2>
</div>
<div class="col-lg-2">
<img class="img-circle img-responsive center-block" alt="140x140" src="http://lorempixel.com/140/140/business">
<h2 class="text-center">Heading</h2>
</div>
<div class="col-lg-2">
<img class="img-circle img-responsive center-block" alt="140x140" src="http://lorempixel.com/140/140/business">
<h2 class="text-center">Heading</h2>
</div>
</div>
</div>
</div>
</div>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"><\/script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"><\/script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<style>
.carousel-indicators {
bottom: -60px;
}
.carousel-indicators li{
background: grey;
}
.carousel-indicators li.active{
background: red;
}
</style>
<body>
<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>
<\!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="row">
<div class="col-lg-2">
<img class="img-circle img-responsive center-block" alt="140x140" src="http://lorempixel.com/140/140/nature">
<h2 class="text-center">Heading</h2>
</div>
<div class="col-lg-2">
<img class="img-circle img-responsive center-block" alt="140x140" src="http://lorempixel.com/140/140/transport">
<h2 class="text-center">Heading</h2>
</div>
<div class="col-lg-2">
<img class="img-circle img-responsive center-block" alt="140x140" src="http://lorempixel.com/140/140/business">
<h2 class="text-center">Heading</h2>
</div>
<div class="col-lg-2">
<img class="img-circle img-responsive center-block" alt="140x140" src="http://lorempixel.com/140/140/transport">
<h2 class="text-center">Heading</h2>
</div>
<div class="col-lg-2">
<img class="img-circle img-responsive center-block" alt="140x140" src="http://lorempixel.com/140/140/business">
<h2 class="text-center">Heading</h2>
</div>
<div class="col-lg-2">
<img class="img-circle img-responsive center-block" alt="140x140" src="http://lorempixel.com/140/140/business">
<h2 class="text-center">Heading</h2>
</div>
<div class="col-lg-2">
<img class="img-circle img-responsive center-block" alt="140x140" src="http://lorempixel.com/140/140/nature">
<h2 class="text-center">Heading</h2>
</div>
<div class="col-lg-2">
<img class="img-circle img-responsive center-block" alt="140x140" src="http://lorempixel.com/140/140/transport">
<h2 class="text-center">Heading</h2>
</div>
<div class="col-lg-2">
<img class="img-circle img-responsive center-block" alt="140x140" src="http://lorempixel.com/140/140/business">
<h2 class="text-center">Heading</h2>
</div>
<div class="col-lg-2">
<img class="img-circle img-responsive center-block" alt="140x140" src="http://lorempixel.com/140/140/transport">
<h2 class="text-center">Heading</h2>
</div>
<div class="col-lg-2">
<img class="img-circle img-responsive center-block" alt="140x140" src="http://lorempixel.com/140/140/business">
<h2 class="text-center">Heading</h2>
</div>
<div class="col-lg-2">
<img class="img-circle img-responsive center-block" alt="140x140" src="http://lorempixel.com/140/140/business">
<h2 class="text-center">Heading</h2>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-lg-2">
<img class="img-circle img-responsive center-block" alt="140x140" src="http://lorempixel.com/140/140/nature">
<h2 class="text-center">Heading</h2>
</div>
<div class="col-lg-2">
<img class="img-circle img-responsive center-block" alt="140x140" src="http://lorempixel.com/140/140/transport">
<h2 class="text-center">Heading</h2>
</div>
<div class="col-lg-2">
<img class="img-circle img-responsive center-block" alt="140x140" src="http://lorempixel.com/140/140/business">
<h2 class="text-center">Heading</h2>
</div>
<div class="col-lg-2">
<img class="img-circle img-responsive center-block" alt="140x140" src="http://lorempixel.com/140/140/transport">
<h2 class="text-center">Heading</h2>
</div>
<div class="col-lg-2">
<img class="img-circle img-responsive center-block" alt="140x140" src="http://lorempixel.com/140/140/business">
<h2 class="text-center">Heading</h2>
</div>
<div class="col-lg-2">
<img class="img-circle img-responsive center-block" alt="140x140" src="http://lorempixel.com/140/140/business">
<h2 class="text-center">Heading</h2>
</div>
<div class="col-lg-2">
<img class="img-circle img-responsive center-block" alt="140x140" src="http://lorempixel.com/140/140/nature">
<h2 class="text-center">Heading</h2>
</div>
<div class="col-lg-2">
<img class="img-circle img-responsive center-block" alt="140x140" src="http://lorempixel.com/140/140/transport">
<h2 class="text-center">Heading</h2>
</div>
<div class="col-lg-2">
<img class="img-circle img-responsive center-block" alt="140x140" src="http://lorempixel.com/140/140/business">
<h2 class="text-center">Heading</h2>
</div>
<div class="col-lg-2">
<img class="img-circle img-responsive center-block" alt="140x140" src="http://lorempixel.com/140/140/transport">
<h2 class="text-center">Heading</h2>
</div>
<div class="col-lg-2">
<img class="img-circle img-responsive center-block" alt="140x140" src="http://lorempixel.com/140/140/business">
<h2 class="text-center">Heading</h2>
</div>
<div class="col-lg-2">
<img class="img-circle img-responsive center-block" alt="140x140" src="http://lorempixel.com/140/140/business">
<h2 class="text-center">Heading</h2>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment