Last active
March 6, 2024 15:31
-
-
Save loschke/8489303 to your computer and use it in GitHub Desktop.
Bootstrap 3 - Carousel Collection Pack
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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: Fullscreen Background Carousel - Bootstrap Carousel</title> | |
<meta name="description" content="Fullscreen Background - 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"> | |
<!--##################### | |
Additional Styles (required) | |
######################--> | |
<style> | |
html,body { | |
height:100%; | |
width:100%; | |
position:relative; | |
} | |
#background-carousel{ | |
position:fixed; | |
width:100%; | |
height:100%; | |
z-index:-1; | |
} | |
.carousel, | |
.carousel-inner { | |
width:100%; | |
height:100%; | |
z-index:0; | |
overflow:hidden; | |
} | |
.item { | |
width:100%; | |
height:100%; | |
background-position:center center; | |
background-size:cover; | |
z-index:0; | |
} | |
#content-wrapper { | |
position:absolute; | |
z-index:1 !important; | |
min-width:100%; | |
min-height:100%; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="background-carousel"> | |
<div id="myCarousel" class="carousel slide" data-ride="carousel"> | |
<div class="carousel-inner"> | |
<div class="item active" style="background-image:url(http://placehold.it/1600x800/)"></div> | |
<div class="item" style="background-image:url(http://placehold.it/1600x800/)"></div> | |
<div class="item" style="background-image:url(http://placehold.it/1600x800/)"></div> | |
</div> | |
</div> | |
</div> | |
<div id="content-wrapper"> | |
<!-- PAGE CONTENT --> | |
<div class="container"> | |
<div class="page-header"><h3>Background Carousel</h3></div> | |
<div class="well" style="opacity:0.6;"><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. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> | |
</div><!-- End Well --> | |
</div><!-- End Container --> | |
<!-- PAGE CONTENT --> | |
</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> | |
$(document).ready(function() { | |
/* Additional Javascript (required) */ | |
$('#myCarousel').carousel({ | |
pause: 'none' | |
}) | |
}); | |
</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Bootstrap 3 - Carousel/Slider Collection | |
Article: http://sevenx.de/blog | |
Demo: http://sevenx.de/demo/bootstrap-carousel | |
Working Examples (inline Styles, CDN Scripts) | |
- minimal Bootstrap Markup changes | |
- minimal CSS Styles | |
- minimal jQuery | |
- no external Plugings/Scripts | |
- no support :) | |
The MIT License (MIT) | |
Copyright (c) 2014 sevenX - Rico Loschke | |
Permission is hereby granted, free of charge, to any person obtaining a copy | |
of this software and associated documentation files (the "Software"), to deal | |
in the Software without restriction, including without limitation the rights | |
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | |
copies of the Software, and to permit persons to whom the Software is | |
furnished to do so, subject to the following conditions: | |
The above copyright notice and this permission notice shall be included in | |
all copies or substantial portions of the Software. | |
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | |
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | |
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | |
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | |
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | |
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN | |
THE SOFTWARE. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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; } | |
/*##################### | |
Additional Styles (required) | |
#####################*/ | |
#myCarousel .carousel-caption { | |
left:0; | |
right:0; | |
bottom:0; | |
text-align:left; | |
padding:10px; | |
background:rgba(0,0,0,0.6); | |
text-shadow:none; | |
} | |
#myCarousel .list-group { | |
position:absolute; | |
top:0; | |
right:0; | |
} | |
#myCarousel .list-group-item { | |
border-radius:0px; | |
cursor:pointer; | |
} | |
#myCarousel .list-group .active { | |
background-color:#eee; | |
} | |
@media (min-width: 992px) { | |
#myCarousel {padding-right:33.3333%;} | |
#myCarousel .carousel-controls {display:none;} | |
} | |
@media (max-width: 991px) { | |
.carousel-caption p, | |
#myCarousel .list-group {display:none;} | |
} | |
</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/760x400/cccccc/ffffff"> | |
<div class="carousel-caption"> | |
<h4><a href="#">Lorem ipsum dolor sit amet consetetur sadipscing</a></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. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. <a class="label label-primary" href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank">Free Bootstrap Carousel Collection</a></p> | |
</div> | |
</div><!-- End Item --> | |
<div class="item"> | |
<img src="http://placehold.it/760x400/999999/cccccc"> | |
<div class="carousel-caption"> | |
<h4><a href="#">consetetur sadipscing elitr, sed diam nonumy eirmod</a></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. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. <a class="label label-primary" href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank">Free Bootstrap Carousel Collection</a></p> | |
</div> | |
</div><!-- End Item --> | |
<div class="item"> | |
<img src="http://placehold.it/760x400/dddddd/333333"> | |
<div class="carousel-caption"> | |
<h4><a href="#">tempor invidunt ut labore et dolore</a></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. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. <a class="label label-primary" href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank">Free Bootstrap Carousel Collection</a></p> | |
</div> | |
</div><!-- End Item --> | |
<div class="item"> | |
<img src="http://placehold.it/760x400/999999/cccccc"> | |
<div class="carousel-caption"> | |
<h4><a href="#">magna aliquyam erat, sed diam voluptua</a></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. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. <a class="label label-primary" href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank">Free Bootstrap Carousel Collection</a></p> | |
</div> | |
</div><!-- End Item --> | |
<div class="item"> | |
<img src="http://placehold.it/760x400/dddddd/333333"> | |
<div class="carousel-caption"> | |
<h4><a href="#">tempor invidunt ut labore et dolore magna aliquyam erat</a></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. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. <a class="label label-primary" href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank">Free Bootstrap Carousel Collection</a></p> | |
</div> | |
</div><!-- End Item --> | |
</div><!-- End Carousel Inner --> | |
<ul class="list-group col-sm-4"> | |
<li data-target="#myCarousel" data-slide-to="0" class="list-group-item active"><h4>Lorem ipsum dolor sit amet consetetur sadipscing</h4></li> | |
<li data-target="#myCarousel" data-slide-to="1" class="list-group-item"><h4>consetetur sadipscing elitr, sed diam nonumy eirmod</h4></li> | |
<li data-target="#myCarousel" data-slide-to="2" class="list-group-item"><h4>tempor invidunt ut labore et dolore</h4></li> | |
<li data-target="#myCarousel" data-slide-to="3" class="list-group-item"><h4>magna aliquyam erat, sed diam voluptua</h4></li> | |
<li data-target="#myCarousel" data-slide-to="4" class="list-group-item"><h4>tempor invidunt ut labore et dolore magna aliquyam erat</h4></li> | |
</ul> | |
<!-- Controls --> | |
<div class="carousel-controls"> | |
<a class="left carousel-control" href="#myCarousel" data-slide="prev"> | |
<span class="glyphicon glyphicon-chevron-left"></span> | |
</a> | |
<a class="right carousel-control" href="#myCarousel" data-slide="next"> | |
<span class="glyphicon glyphicon-chevron-right"></span> | |
</a> | |
</div> | |
</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> | |
/*##################### | |
Additional jQuery (required) | |
#####################*/ | |
$(document).ready(function(){ | |
var clickEvent = false; | |
$('#myCarousel').carousel({ | |
interval: 4000 | |
}).on('click', '.list-group li', function() { | |
clickEvent = true; | |
$('.list-group li').removeClass('active'); | |
$(this).addClass('active'); | |
}).on('slid.bs.carousel', function(e) { | |
if(!clickEvent) { | |
var count = $('.list-group').children().length -1; | |
var current = $('.list-group li.active'); | |
current.removeClass('active').next().addClass('active'); | |
var id = parseInt(current.data('slide-to')); | |
if(count == id) { | |
$('.list-group li').first().addClass('active'); | |
} | |
} | |
clickEvent = false; | |
}); | |
}) | |
$(window).load(function() { | |
var boxheight = $('#myCarousel .carousel-inner').innerHeight(); | |
var itemlength = $('#myCarousel .item').length; | |
var triggerheight = Math.round(boxheight/itemlength+1); | |
$('#myCarousel .list-group-item').outerHeight(triggerheight); | |
}); | |
</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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: Product Thumbnail - Bootstrap Carousel</title> | |
<meta name="description" content="Produkt Thumbnail - 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 { | |
color:#428BCA; | |
top:44%; | |
bottom:auto; | |
opacity:1; | |
} | |
.carousel-control:hover { | |
color:#d9534f; | |
} | |
.carousel-control.left, .carousel-control.right { | |
background-image:none !important; | |
} | |
.carousel-control.right { | |
left:auto; | |
right:-25px; | |
} | |
.carousel-control.left { | |
right:auto; | |
left:-25px; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="container"> | |
<div class="row"> | |
<div class="col-md-3"> | |
<!-- Carousel | |
================================================== --> | |
<div id="myCarousel" class="carousel slide" data-ride="carousel"> | |
<div class="carousel-inner"> | |
<div class="item active"> | |
<div class="thumbnail"> | |
<img src="http://placehold.it/300x200/" alt="Slide1"> | |
<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><!-- End Item --> | |
<div class="item"> | |
<div class="thumbnail"> | |
<img src="http://placehold.it/300x200/" alt="Slide2"> | |
<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><!-- End Item --> | |
<div class="item"> | |
<div class="thumbnail"> | |
<img src="http://placehold.it/300x200/" alt="Slide1"> | |
<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><!-- End Item --> | |
</div><!-- End Carousel Inner --> | |
<div class="carousel-controls"> | |
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> | |
<a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> | |
</div> | |
</div><!-- /.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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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 Controls - Bootstrap Carousel</title> | |
<meta name="description" content="Simple 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) | |
######################*/ | |
.carousel-inner .item img { | |
width:100%; | |
height:100%; | |
} | |
.item .thumbnail { | |
margin-bottom:0; | |
} | |
.carousel-control.left, .carousel-control.right { | |
background-image:none !important; | |
} | |
.carousel-control { | |
background: #ddd; | |
color:#999; | |
padding: 4px 0; | |
width:26px; | |
top:auto; | |
left:auto; | |
bottom:0; | |
opacity:1; | |
text-shadow:none; | |
} | |
.carousel-control.right { | |
right:10px; | |
} | |
.carousel-control.left { | |
right: 40px; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="container"> | |
<div class="row"> | |
<div class="col-md-6"> | |
<!-- Carousel | |
================================================== --> | |
<div id="myCarousel" class="carousel slide"> | |
<!-- Indicators --> | |
<div class="carousel-inner"> | |
<div class="item active"> | |
<blockquote> | |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> | |
<small>Someone famous in <cite title="Source Title">Source Title</cite></small> | |
</blockquote> | |
</div> | |
<div class="item"> | |
<blockquote> | |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> | |
<small>Someone famous in <cite title="Source Title">Source Title</cite></small> | |
</blockquote> | |
</div> | |
<div class="item"> | |
<blockquote> | |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> | |
<small>Someone famous in <cite title="Source Title">Source Title</cite></small> | |
</blockquote> | |
</div> | |
</div> | |
<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><!-- 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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment