Skip to content

Instantly share code, notes, and snippets.

@stanwmusic

stanwmusic/Bootstrap-3_Carousel-Collection

Forked from loschke/Bootstrap-3_Carousel-Collection
Created June 13, 2017 00:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save stanwmusic/942af407d321bf0b8edf068402fe26c1 to your computer and use it in GitHub Desktop.
Save stanwmusic/942af407d321bf0b8edf068402fe26c1 to your computer and use it in GitHub Desktop.
Download ZIP
Bootstrap 3 - Carousel Collection Pack
Raw
boxed-thumbnails.html
<!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>Demo: Boxed Thumbnails - Bootstrap Carousel</title>
<meta name="description" content="Boxed Thumbnails - Bootstrap Carousel - Collection by sevenXdemo - More Information: www.sevenX.de/blog" />
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<style>
body { padding-top: 50px; }
/*#####################
Additional Styles (required)
######################*/
#myCarousel .thumbnail {
margin-bottom: 0;
}
.carousel-control.left, .carousel-control.right {
background-image:none !important;
}
.carousel-control {
color:#fff;
top:40%;
color:#428BCA;
bottom:auto;
padding-top:4px;
width:30px;
height:30px;
text-shadow:none;
opacity:1;
}
.carousel-control:hover {
color: #d9534f;
}
.carousel-control.left, .carousel-control.right {
background-image:none !important;
}
.carousel-control.right {
left:auto;
right:-32px;
}
.carousel-control.left {
right:auto;
left:-32px;
}
.carousel-indicators {
bottom:-30px;
}
.carousel-indicators li {
border-radius:0;
width:10px;
height:10px;
background:#ccc;
border:1px solid #ccc;
}
.carousel-indicators .active {
width:12px;
height:12px;
background:#3276b1;
border-color:#3276b1;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="well">
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-md-3"><a href="#" class="thumbnail"><img class="img-responsive" src="http://placehold.it/250x160" alt="Thumb11"></a>
</div>
<div class="col-md-3"><a href="#" class="thumbnail"><img class="img-responsive" src="http://placehold.it/250x160" alt="Thumb12"></a>
</div>
<div class="col-md-3"><a href="#" class="thumbnail"><img class="img-responsive" src="http://placehold.it/250x160" alt="Thumb13"></a>
</div>
<div class="col-md-3"><a href="#" class="thumbnail"><img class="img-responsive" src="http://placehold.it/250x160" alt="Thumb14"></a>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-3"><a href="#" class="thumbnail"><img class="img-responsive" src="http://placehold.it/250x160" alt="Thumb21"></a>
</div>
<div class="col-md-3"><a href="#" class="thumbnail"><img class="img-responsive" src="http://placehold.it/250x160" alt="Thumb22"></a>
</div>
<div class="col-md-3"><a href="#" class="thumbnail"><img class="img-responsive" src="http://placehold.it/250x160" alt="Thumb23"></a>
</div>
<div class="col-md-3"><a href="#" class="thumbnail"><img class="img-responsive" src="http://placehold.it/250x160" alt="Thumb24"></a>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-3"><a href="#" class="thumbnail"><img class="img-responsive" src="http://placehold.it/250x160" alt="Thumb31"></a>
</div>
<div class="col-md-3"><a href="#" class="thumbnail"><img class="img-responsive" src="http://placehold.it/250x160" alt="Thumb32"></a>
</div>
<div class="col-md-3"><a href="#" class="thumbnail"><img class="img-responsive" src="http://placehold.it/250x160" alt="Thumb33"></a>
</div>
<div class="col-md-3"><a href="#" class="thumbnail"><img class="img-responsive" src="http://placehold.it/250x160" alt="Thumb34"></a>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="fa fa-chevron-left fa-2x"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="fa fa-chevron-right fa-2x"></i></a>
<ol class="carousel-indicators">
<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>
</ol>
</div><!-- End Carousel -->
</div><!-- End Well -->
</div>
</div>
<script src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script>
$('#myCarousel').carousel({
interval: 4000
});
</script>
</body>
</html>
Raw
full-feature.html
<!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>Demo: Fullsize Header - Bootstrap Carousel</title>
<meta name="description" content="Fullsize Header - Bootstrap Carousel - Collection by sevenXdemo - More Information: www.sevenX.de/blog" />
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<style>
body {
padding-top:50px;
}
/*#####################
Additional Styles (required)
#####################*/
.carousel-control.left, .carousel-control.right {
background-image:none !important;
}
.carousel-inner .item img {
width:100%;
height:100%;
}
.carousel-indicators {
bottom:5px;
left:0;
width:auto;
padding:5px 25px 5px 25px;
margin-left:0;
background:rgba(0,0,0,0.7);
}
.carousel-indicators li {
border-radius:0;
width:8px;
height:8px;
background:#fff;
}
.carousel-indicators .active {
width:10px;
height:10px;
background:#39b3d7;
border-color:#39b3d7;
}
.carousel-control {
background: #39b3d7;
color:#fff;
padding: 4px 0;
width:26px;
top:auto;
left:auto;
bottom:12px;
opacity:0.85;
}
.carousel-control.right {
right:10px;
}
.carousel-control.left {
right: 46px;
}
.carousel-caption {
top:auto;
width:auto;
right:auto;
bottom:60px;
left:0;
padding:20px;
background:rgba(0,0,0,0.70);
text-align:left;
height:auto;
max-width:50%;
}
</style>
</head>
<body>
<div class="container">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<article class="item active">
<img src="http://placehold.it/1200x440/cccccc/ffffff">
<div class="carousel-caption">
<h3>Headline</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<p><a class="btn btn-info btn-sm">Read More</a></p>
</div>
</article>
<article class="item">
<img src="http://placehold.it/1200x440/999999/cccccc">
<div class="carousel-caption">
<h3>Headline</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<p><a class="btn btn-info btn-sm">Read More</a></p>
</div>
</article>
<article class="item">
<img src="http://placehold.it/1200x440/dddddd/333333">
<div class="carousel-caption">
<h3>Headline</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<p><a class="btn btn-info btn-sm">Read More</a></p>
</div>
</article>
</div>
<!-- Indicators -->
<ol class="carousel-indicators">
<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>
</ol>
<!-- Controls -->
<div class="carousel-controls">
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="fa fa-angle-double-left"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="fa fa-angle-double-right"></span>
</a>
</div>
</div>
</div>
<script src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script>
$('#myCarousel').carousel({
interval: 4000
});
</script>
</body>
</html>
Raw
fullsize-header.html
<!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>Demo: Fullsize Header - Bootstrap Carousel</title>
<meta name="description" content="Fullsize Header - Bootstrap Carousel - Collection by sevenXdemo - More Information: www.sevenX.de/blog" />
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<!--#####################
CUSTOM CSS
######################-->
<style>
body {
padding-top:50px;
}
.item img {
width:100%;
}
.carousel-control.left, .carousel-control.right {
background-image:none !important;
opacity:1;
}
.carousel-control.left {
top:40%
}
.carousel-control.right {
top:40%
}
.carousel-caption {
top:15%;
text-align:left;
height:auto;
}
.carousel-caption h2 {
line-height:160%
}
.carousel-caption h2 span {
background:#428BCA;
padding:10px 20px;
color:#fff;
border-left:3px solid #fff;
}
p.caption {
background:#fff;
padding:6px;
text-shadow:none;
color:#428BCA;
}
</style>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<!--<img src="img/slider/Fotolia_30977559_XS.jpg" alt="slide 1">-->
<img src="http://placehold.it/1500x400/cccccc/ffffff" alt="Slide1">
<div class="container">
<div class="carousel-caption">
<h2><span>Carousel Headline 1</span></h2>
<p class="caption"><span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</span></p>
<p><a class="btn btn-danger" href="#">Read More <i class="fa fa-angle-double-right"></i></a>
</p></div>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1500x400/999999/cccccc" alt="Slide2">
<div class="container">
<div class="carousel-caption">
<h2><span>Carousel Headline 2</span></h2>
<p class="caption"><span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</span></p>
<p><a class="btn btn-danger" href="#">Read More <i class="fa fa-angle-double-right"></i></a></p>
</div>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1500x400/dddddd/333333" alt="Slide3">
<div class="container">
<div class="carousel-caption">
<h2><span>Carousel Headline 3</span></h2>
<p class="caption"><span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</span></p>
<p><a class="btn btn-danger" href="#">Read More <i class="fa fa-angle-double-right"></i></a></p>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="fa fa-chevron-left fa-2x"></span></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="fa fa-chevron-right fa-2x"></span></a>
</div>
<!-- /.carousel -->
<script src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script>
$('#myCarousel').carousel({
interval: 4000
});
</script>
</body>
</html>
Raw
header-controls.html
<!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>Demo: Header Controls - Bootstrap Carousel</title>
<meta name="description" content="Header Controls - Bootstrap Carousel - Collection by sevenXdemo - More Information: www.sevenX.de/blog" />
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<style>
body { padding-top: 50px; }
/*#####################
Additional Styles (required)
######################*/
h3 {
color:#3276b1;
border-bottom:1px solid #3276b1;
margin-bottom:0;
}
.carousel-control {
color:#428BCA;
top:-25px;
left:auto;
bottom:auto;
opacity:1;
text-shadow:none;
}
.carousel-control:hover { color:#d9534f; }
.carousel-control.left, .carousel-control.right {
background-image:none !important;
}
.carousel-control.right { right:-10px; }
.carousel-control.left { right:15px; }
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
<h3>Headline</h3>
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<figure class="item active">
<img class="thumbnail" src="http://placehold.it/300x200/" alt="slide1">
</figure>
<figure class="item">
<img class="thumbnail" src="http://placehold.it/300x200/" alt="slide2">
</figure>
<figure class="item">
<img class="thumbnail" src="http://placehold.it/300x200/" alt="slide3">
</figure>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev"><i class="fa fa-angle-double-left"></i></a>
<a class="carousel-control right" href="#myCarousel" data-slide="next"><i class="fa fa-angle-double-right"></i></a>
</div><!-- End Carousel -->
</div>
</div>
</div>
<script src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</body>
</html>
Raw
news-box.html
<!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>Demo: Simple Indicators - Bootstrap Carousel</title>
<meta name="description" content="Simple Indicators - Bootstrap Carousel - Collection by sevenXdemo - More Information: www.sevenX.de/blog" />
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<style>
body { padding-top: 50px; }
/*#####################
Additional Styles (required)
######################*/
.carousel-indicators {
bottom:-40px;
left:0;
width:100%;
background:#ccc;
padding: 6px 0px;
margin-left:0;
border-top:2px solid #fff;
}
.carousel-indicators li {
width:12px;
height:12px;
background:#fff;
border-color:#fff;
}
.carousel-indicators .active {
width:14px;
height:14px;
background:#428bca;
border-color:#428bca;
}
.carousel-inner .thumbnail {
margin-bottom:0;
border-bottom-left-radius:0;
border-bottom-right-radius:0;
}
.carousel-inner .caption {
background:#ddd;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<a href="#"><img class="thumbnail" src="http://placehold.it/600x400/" alt="Slide1"></a>
<div class="caption">
<h4>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
</div>
</div>
<div class="item">
<a href="#"><img class="thumbnail" src="http://placehold.it/600x400/" alt="Slide2"></a>
<div class="caption">
<h4>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
</div>
</div>
<div class="item">
<a href="#"><img class="thumbnail" src="http://placehold.it/600x400/" alt="Slide3"></a>
<div class="caption">
<h4>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
</div>
</div>
</div>
<!-- Indicators -->
<ol class="carousel-indicators">
<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>
</ol>
</div><!-- End Carousel -->
</div>
</div>
</div>
<script src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script>
$('#myCarousel').carousel({
interval: 4000
});
</script>
</body>
</html>
Raw
numbered-indicators.html
<!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>Demo: Numbered Indicators - Bootstrap Carousel</title>
<meta name="description" content="Numbered Indicators - Bootstrap Carousel - Collection by sevenXdemo - More Information: www.sevenX.de/blog" />
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<style>
body { padding-top: 50px; }
/*#####################
Additional Styles (required)
######################*/
.carousel-inner .item {
border: 2px solid #3276b1;
}
.carousel-indicators {
bottom:-30px;
left:0;
width:auto;
margin-left:0;
color:#fff;
font-weight:bold;
}
.carousel-indicators li {
border-radius:0;
padding:0 8px;
width:auto;
height:auto;
line-height:20px;
background:#ddd;
color:#999;
border:none;
text-indent:0;
margin:0;
}
.carousel-indicators li.active {
width:auto;
height:auto;
color:#fff;
background:#3276b1;
border-color:none;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<figure class="item active">
<img src="http://placehold.it/300x200/" alt="Slide1">
</figure>
<figure class="item">
<img src="http://placehold.it/300x200/" alt="Slide2">
</figure>
<figure class="item">
<img src="http://placehold.it/300x200/" alt="Slide3">
</figure>
</div>
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active">1</li>
<li data-target="#myCarousel" data-slide-to="1">2</li>
<li data-target="#myCarousel" data-slide-to="2">3</li>
</ol>
</div><!-- End Carousel -->
</div>
</div>
</div>
<script src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</body>
</html>
Raw
product-slider.html
<!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>Demo: Boxed Thumbnails - Bootstrap Carousel</title>
<meta name="description" content="Boxed Thumbnails - Bootstrap Carousel - Collection by sevenXdemo - More Information: www.sevenX.de/blog" />
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<style>
body { padding-top: 50px; }
/*#####################
Additional Styles (required)
######################*/
#myCarousel .thumbnail {
margin-bottom: 0;
}
.carousel-control.left, .carousel-control.right {
background-image:none !important;
}
.carousel-control {
color:#fff;
top:40%;
color:#428BCA;
bottom:auto;
padding-top:4px;
width:30px;
height:30px;
text-shadow:none;
opacity:1;
}
.carousel-control:hover {
color: #d9534f;
}
.carousel-control.left, .carousel-control.right {
background-image:none !important;
}
.carousel-control.right {
left:auto;
right:-32px;
}
.carousel-control.left {
right:auto;
left:-32px;
}
.carousel-indicators {
bottom:-30px;
}
.carousel-indicators li {
border-radius:0;
width:10px;
height:10px;
background:#ccc;
border:1px solid #ccc;
}
.carousel-indicators .active {
width:12px;
height:12px;
background:#3276b1;
border-color:#3276b1;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="well">
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-md-3">
<div class="thumbnail">
<img src="http://placehold.it/300x200/" alt="Slide11">
<div class="caption">
<h3>Product label</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
<p><a href="#" class="btn btn-primary" role="button">12,99 €</a> <a href="#" class="btn btn-default" role="button">Wishlist</a></p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="http://placehold.it/300x200/" alt="Slide12">
<div class="caption">
<h3>Product label</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
<p><a href="#" class="btn btn-primary" role="button">12,99 €</a> <a href="#" class="btn btn-default" role="button">Wishlist</a></p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="http://placehold.it/300x200/" alt="Slide13">
<div class="caption">
<h3>Product label</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
<p><a href="#" class="btn btn-primary" role="button">12,99 €</a> <a href="#" class="btn btn-default" role="button">Wishlist</a></p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="http://placehold.it/300x200/" alt="Slide14">
<div class="caption">
<h3>Product label</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
<p><a href="#" class="btn btn-primary" role="button">12,99 €</a> <a href="#" class="btn btn-default" role="button">Wishlist</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-3">
<div class="thumbnail">
<img src="http://placehold.it/300x200/" alt="Slide21">
<div class="caption">
<h3>Product label</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
<p><a href="#" class="btn btn-primary" role="button">12,99 €</a> <a href="#" class="btn btn-default" role="button">Wishlist</a></p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="http://placehold.it/300x200/" alt="Slide22">
<div class="caption">
<h3>Product label</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
<p><a href="#" class="btn btn-primary" role="button">12,99 €</a> <a href="#" class="btn btn-default" role="button">Wishlist</a></p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="http://placehold.it/300x200/" alt="Slide23">
<div class="caption">
<h3>Product label</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
<p><a href="#" class="btn btn-primary" role="button">12,99 €</a> <a href="#" class="btn btn-default" role="button">Wishlist</a></p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="http://placehold.it/300x200/" alt="Slide24">
<div class="caption">
<h3>Product label</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
<p><a href="#" class="btn btn-primary" role="button">12,99 €</a> <a href="#" class="btn btn-default" role="button">Wishlist</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-3">
<div class="thumbnail">
<img src="http://placehold.it/300x200/" alt="Slide31">
<div class="caption">
<h3>Product label</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
<p><a href="#" class="btn btn-primary" role="button">12,99 €</a> <a href="#" class="btn btn-default" role="button">Wishlist</a></p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="http://placehold.it/300x200/" alt="Slide32">
<div class="caption">
<h3>Product label</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
<p><a href="#" class="btn btn-primary" role="button">12,99 €</a> <a href="#" class="btn btn-default" role="button">Wishlist</a></p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="http://placehold.it/300x200/" alt="Slide33">
<div class="caption">
<h3>Product label</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
<p><a href="#" class="btn btn-primary" role="button">12,99 €</a> <a href="#" class="btn btn-default" role="button">Wishlist</a></p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="http://placehold.it/300x200/" alt="Slide34">
<div class="caption">
<h3>Product label</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
<p><a href="#" class="btn btn-primary" role="button">12,99 €</a> <a href="#" class="btn btn-default" role="button">Wishlist</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="fa fa-chevron-left fa-2x"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="fa fa-chevron-right fa-2x"></i></a>
<ol class="carousel-indicators">
<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>
</ol>
</div><!-- End Carousel -->
</div><!-- End Well -->
</div>
</div>
<script src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script>
$('#myCarousel').carousel({
interval: 4000
});
</script>
</body>
</html>
Raw
simple-caption.html
<!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>Demo: Simple Caption - Bootstrap Carousel</title>
<meta name="description" content="Simple Caption - Bootstrap Carousel - Collection by sevenXdemo - More Information: www.sevenX.de/blog" />
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<style>
body {
padding-top:50px;
}
/*#####################
Additional Styles (required)
#####################*/
#myCarousel {
padding:5px;
background: #428BCA;
}
#myCarousel .carousel-caption {
top:auto;
width:auto;
right:auto;
bottom:0px;
left:0;
padding:20px;
background:rgba(255,255,255,0.65);
text-align:center;
height:auto;
width:100%;
color:#432A18;/*#FFF*/
text-shadow:none;
}
#myCarousel .carousel-caption h2 {
color:#428BCA;
margin-top:0;
}
.carousel-control {
color:#fff;
top:44%;
background:#428BCA;
bottom:auto;
padding-top:8px;
width:36px;
border-radius:50%;
height:36px;
opacity:1;
}
.carousel-control.left, .carousel-control.right {
background-image:none !important;
}
.carousel-control.right,
.carousel-control .glyphicon-chevron-right {
left:auto;
right:-16px;
}
.carousel-control.left {
right:auto;
left:-16px;
}
</style>
</head>
<body>
<div class="container">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/1200x440/cccccc/ffffff" alt="Slide1">
<div class="carousel-caption">
<h2>Headline</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x440/999999/cccccc" alt="Slide2">
<div class="carousel-caption">
<h2>Headline</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x440/dddddd/333333" alt="Slide3">
<div class="carousel-caption">
<h2>Headline</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
</div>
</div>
<div class="carousel-controls">
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="fa fa-angle-double-left fa-lg"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="fa fa-angle-double-right fa-lg"></i></a>
</div>
</div>
</div>
<script src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script>
$('#myCarousel').carousel({
interval: 4000
});
</script>
</body>
</html>
Raw
simple-controls.html
<!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>Demo: Simple Indicators - Bootstrap Carousel</title>
<meta name="description" content="Simple Indicators - Bootstrap Carousel - Collection by sevenXdemo - More Information: www.sevenX.de/blog" />
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<style>
body { padding-top: 50px; }
/*#####################
Additional Styles (required)
######################*/
.carousel-indicators {
bottom:15px;
left:10px;
width:auto;
margin-left:0;
}
.carousel-indicators li {
border-radius:0;
width:8px;
height:8px;
background:#fff;
}
.carousel-indicators .active {
width:10px;
height:10px;
background:#3276b1;
border-color:#3276b1;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<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>
</ol>
<div class="carousel-inner">
<figure class="item active">
<img class="thumbnail" src="http://placehold.it/300x200/" alt="Slide1">
</figure>
<figure class="item">
<img class="thumbnail" src="http://placehold.it/300x200/" alt="Slide2">
</figure>
<figure class="item">
<img class="thumbnail" src="http://placehold.it/300x200/" alt="Slide3">
</figure>
</div>
</div><!-- End Carousel -->
</div>
</div>
</div>
<script src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script>
$('#myCarousel').carousel({
interval: 4000
});
</script>
</body>
</html>
Raw
simple-indicators.html
<!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>Demo: Simple Indicators - Bootstrap Carousel</title>
<meta name="description" content="Simple Indicators - Bootstrap Carousel - Collection by sevenXdemo - More Information: www.sevenX.de/blog" />
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<style>
body { padding-top: 50px; }
/*#####################
Additional Styles (required)
######################*/
.carousel-indicators {
bottom:15px;
left:10px;
width:auto;
margin-left:0;
}
.carousel-indicators li {
border-radius:0;
width:8px;
height:8px;
background:#fff;
}
.carousel-indicators .active {
width:10px;
height:10px;
background:#3276b1;
border-color:#3276b1;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<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>
</ol>
<div class="carousel-inner">
<figure class="item active">
<img class="thumbnail" src="http://placehold.it/300x200/" alt="Slide1">
</figure>
<figure class="item">
<img class="thumbnail" src="http://placehold.it/300x200/" alt="Slide2">
</figure>
<figure class="item">
<img class="thumbnail" src="http://placehold.it/300x200/" alt="Slide3">
</figure>
</div>
</div><!-- End Carousel -->
</div>
</div>
</div>
<script src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</body>
</html>
Raw
tabbed-slider.html
<!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>Demo: Bootstrap Basic Carousel - Bootstrap Carousel</title>
<meta name="description" content="Bootstrap Basic Carousel - Bootstrap Carousel - Collection by sevenXdemo - More Information: www.sevenX.de/blog" />
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<style>
body { padding-top: 50px; }
#myCarousel .nav a small {
display:block;
}
#myCarousel .nav {
background:#eee;
}
</style>
</head>
<body>
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/1200x440/cccccc/ffffff">
<div class="carousel-caption">
<h3>Headline</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
</div><!-- End Item -->
<div class="item">
<img src="http://placehold.it/1200x440/999999/cccccc">
<div class="carousel-caption">
<h3>Headline</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
</div><!-- End Item -->
<div class="item">
<img src="http://placehold.it/1200x440/dddddd/333333">
<div class="carousel-caption">
<h3>Headline</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
</div><!-- End Item -->
<div class="item">
<img src="http://placehold.it/1200x440/999999/cccccc">
<div class="carousel-caption">
<h3>Headline</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
</div><!-- End Item -->
</div><!-- End Carousel Inner -->
<ul class="nav nav-pills nav-justified">
<li data-target="#myCarousel" data-slide-to="0" class="active"><a href="#">About<small>Lorem ipsum dolor sit</small></a></li>
<li data-target="#myCarousel" data-slide-to="1"><a href="#">Projects<small>Lorem ipsum dolor sit</small></a></li>
<li data-target="#myCarousel" data-slide-to="2"><a href="#">Portfolio<small>Lorem ipsum dolor sit</small></a></li>
<li data-target="#myCarousel" data-slide-to="3"><a href="#">Services<small>Lorem ipsum dolor sit</small></a></li>
</ul>
</div><!-- End Carousel -->
</div>
<script src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script>
$('#myCarousel').carousel({
interval: 4000
});
var clickEvent = false;
$('#myCarousel').on('click', '.nav a', function() {
clickEvent = true;
$('.nav li').removeClass('active');
$(this).parent().addClass('active');
}).on('slid.bs.carousel', function(e) {
if(!clickEvent) {
var count = $('.nav').children().length -1;
var current = $('.nav li.active');
current.removeClass('active').next().addClass('active');
var id = parseInt(current.data('slide-to'));
if(count == id) {
$('.nav li').first().addClass('active');
}
}
clickEvent = false;
});
</script>
</body>
</html>
Raw
thumbnail-navigation.html
<!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>Demo: Fullsize Header - Bootstrap Carousel</title>
<meta name="description" content="Fullsize Header - Bootstrap Carousel - Collection by sevenXdemo - More Information: www.sevenX.de/blog" />
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<style>
body {
padding-top:50px;
}
/*#####################
Additional Styles (required)
#####################*/
#myCarousel .carousel-indicators {
bottom: 0;
left: 10px;
margin-left: 5px;
width: 100%;
}
#myCarousel .carousel-indicators li {
border: medium none;
border-radius: 0;
float: left;
height: 44px;
margin-bottom: 5px;
margin-left: 0;
margin-right: 5px !important;
margin-top: 0;
width: 120px;
}
#myCarousel .carousel-indicators img {
border: 2px solid #FFFFFF;
float: left;
height: 44px;
left: 0;
width: 120px;
}
#myCarousel .carousel-indicators .active img {
border: 2px solid #39b3d7;
}
</style>
</head>
<body>
<div class="container">
<div class="carousel slide article-slide" id="myCarousel">
<div class="carousel-inner cont-slider">
<div class="item active">
<img src="http://placehold.it/1200x440/cccccc/ffffff">
</div>
<div class="item">
<img src="http://placehold.it/1200x440/999999/cccccc">
</div>
<div class="item">
<img src="http://placehold.it/1200x440/dddddd/333333">
</div>
</div>
<!-- Indicators -->
<ol class="carousel-indicators visible-lg visible-md">
<li class="active" data-slide-to="0" data-target="#myCarousel">
<img alt="" title="" src="http://placehold.it/120x44/cccccc/ffffff">
</li>
<li class="" data-slide-to="1" data-target="#myCarousel">
<img alt="" title="" src="http://placehold.it/120x44/999999/cccccc">
</li>
<li class="" data-slide-to="2" data-target="#myCarousel">
<img alt="" title="" src="http://placehold.it/120x44/dddddd/333333">
</li>
</ol>
</div>
</div>
<script src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script>
$('#myCarousel').carousel({
interval: 4000
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment