<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<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">
<div class="login-container">
<div id="output"></div>
<div class="avatar"></div>
<div class="form-box">
<form action="" method="">
<input name="user" type="text" placeholder="username">
<input type="password" placeholder="password">
<button class="btn btn-info btn-block login" type="submit">Login</button>
</form>
</div>
</div>
</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>
body { padding-top: 50px; }
#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;}
body{background: #eee url(http://subtlepatterns.com/patterns/sativa.png);}
html,body{
position: relative;
height: 100%;
}
.login-container{
position: relative;
width: 300px;
margin: 80px auto;
padding: 20px 40px 40px;
text-align: center;
background: #fff;
border: 1px solid #ccc;
}
#output{
position: absolute;
width: 300px;
top: -75px;
left: 0;
color: #fff;
}
#output.alert-success{
background: rgb(25, 204, 25);
}
#output.alert-danger{
background: rgb(228, 105, 105);
}
.login-container::before,.login-container::after{
content: "";
position: absolute;
width: 100%;height: 100%;
top: 3.5px;left: 0;
background: #fff;
z-index: -1;
-webkit-transform: rotateZ(4deg);
-moz-transform: rotateZ(4deg);
-ms-transform: rotateZ(4deg);
border: 1px solid #ccc;
}
.login-container::after{
top: 5px;
z-index: -2;
-webkit-transform: rotateZ(-2deg);
-moz-transform: rotateZ(-2deg);
-ms-transform: rotateZ(-2deg);
}
.avatar{
width: 100px;height: 100px;
margin: 10px auto 30px;
border-radius: 100%;
border: 2px solid #aaa;
background-size: cover;
}
.form-box input{
width: 100%;
padding: 10px;
text-align: center;
height:40px;
border: 1px solid #ccc;;
background: #fafafa;
transition:0.2s ease-in-out;
}
.form-box input:focus{
outline: 0;
background: #eee;
}
.form-box input[type="text"]{
border-radius: 5px 5px 0 0;
text-transform: lowercase;
}
.form-box input[type="password"]{
border-radius: 0 0 5px 5px;
border-top: 0;
}
.form-box button.login{
margin-top:15px;
padding: 10px 20px;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translateY(20px);
-ms-transform: translateY(20px);
transform: translateY(20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
}
$(document).ready(function(){
var boxheight = $('.carousel-inner').height();
var itemlength = $('.item').length;
var triggerheight = Math.round(boxheight/itemlength+1);
$('.list-group-item').outerHeight(triggerheight); //maybe Bootsnipp only
//$('.list-group-item').height(triggerheight); //works fine in local testing
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;
});
})
$(function(){
var textfield = $("input[name=user]");
$('button[type="submit"]').click(function(e) {
e.preventDefault();
//little validation just to check username
if (textfield.val() != "") {
$("#output").addClass("alert alert-success animated fadeInUp").html("Welcome back " + "<span style='text-transform:uppercase'>" + textfield.val() + "</span>");
$("#output").removeClass(' alert-danger');
$("input").css({
"height":"0",
"padding":"0",
"margin":"0",
"opacity":"0"
});
//change button text
$('button[type="submit"]').html("continue")
.removeClass("btn-info")
.addClass("btn-default").click(function(){
$("input").css({
"height":"auto",
"padding":"10px",
"opacity":"1"
}).val("");
});
//show avatar
$(".avatar").css({
"background-image": "url('http://api.randomuser.me/0.3.2/portraits/women/35.jpg')"
});
} else {
//remove success mesage replaced with error message
$("#output").removeClass(' alert alert-success');
$("#output").addClass("alert alert-danger animated fadeInUp").html("sorry enter a username ");
}
//console.log(textfield.val());
});
});
