<!--[if lt IE 9]>
<script src=//oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js></script>
<script src=//oss.maxcdn.com/respond/1.4.2/respond.min.js></script>
<![endif]-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item">
<img src="https://c2.staticflickr.com/8/7293/16438826032_f09beb4a94_o.jpg" alt="By DyosEL on flickr.com">
<div class="carousel-caption">
<h1>Slide one</h1>
<span>Description by slide one</span>
<button class="btn btn-default">Button</button>
</div>
</div>
<div class="item">
<img src="https://c2.staticflickr.com/4/3760/13698769893_8e9be65e3e_o.jpg" alt="By berbagidolar on flickr.com">
<div class="carousel-caption">
<h1>Slide two</h1>
<span>Description by second slide</span>
</div>
</div>
<div class="item">
<img src="https://c2.staticflickr.com/8/7350/16252109378_22c299e2ac_o.jpg" alt="By DyosEL on flickr.com">
<div class="carousel-caption">
<h1>Slide three</h1>
<span>Description by third slide</span>
</div>
</div>
</div>
<ol class="carousel-indicators"></ol>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
.carousel:extend(.carousel) {
overflow: hidden;
.carousel-inner {
height: 100vh;
background-color: #474747;
.item {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
-webkit-transition: opacity 1s, transform 5s linear 0s;
-moz-transition: opacity 1s, transform 5s linear 0s;
-ms-transition: opacity 1s, transform 5s linear 0s;
-o-transition: opacity 1s, transform 5s linear 0s;
transition: opacity 1s, transform 5s linear 0s;
.carousel-caption {
position: absolute;
display: block;
top: 50%;
bottom: auto;
padding-bottom: 0px;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
left: 35%;
right: 35%;
z-index: 1;
& > h1, & > .h1,
& > h2, & > .h2,
& > h3, & > .h3 {
display: inline-block;
width: 100%;
position: relative;
text-align: center;
line-height: 36px;
letter-spacing: 0.9px;
font-size: 32px;
font-weight: normal;
padding-bottom: 15px;
margin-bottom: 20px;
color: #ffffff;
}
& > p, & > span {
display: inline-block;
width: 100%;
text-align: center;
padding-top: 35px;
padding-left: 5px;
padding-right: 5px;
border-top: 1px solid #ffffff;
font-size: 18px;
}
& > .btn, & > button {
display: inline-block;
margin-top: 30px;
color: #ffffff;
background: none;
border: 2px solid #ffffff;
}
}
}
.item,
.active.left,
.active.right {
opacity: 0;
}
.active,
.next.left,
.prev.right {
opacity: 1;
}
.next,
.prev,
.active.left,
.active.right {
left: 0;
bottom: 0;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
&:before {
position: absolute;
display: block;
top: 50%;
left: 50%;
content: "";
margin-top: 0px;
margin-left: -20px;
width: 40px;
height: 40px;
border-top: 2px solid #ffffff;
border-left: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
border-right: 2px solid transparent;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;
-webkit-animation: spinner 1.6s linear infinite;
-moz-animation: spinner 1.6s linear infinite;
animation: spinner 1.6s linear infinite;
z-index: 0;
}
@-moz-keyframes spinner { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spinner { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spinner { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
}
.carousel-control {
&.left,
&.right {
span {
&:before {
}
}
}
&.left .glyphicon {
&:before {
}
}
&.right .glyphicon {
&:before {
}
}
&.left .glyphicon {
&:before {
}
}
&.left .fa,
&.right .fa {
position: absolute;
top: 50%;
left: 0;
right: 0;
text-align: center;
}
&:hover,
&:focus {
}
}
.carousel-indicators {
li {
position: relative;
display: inline-block;
width: 44px;
height: 6px;
padding-left: 3px;
padding-right: 3px;
background: #ffffff;
border: 1px solid #ffffff;
margin-top: 1px;
margin-bottom: 1px;
margin-left: 6px;
margin-right: 6px;
& + li {
margin-left: 6px;
margin-right: 6px;
}
&.active {
width: 44px;
overflow: hidden;
background: rgba(255,255,255,0.5);
margin-left: 6px;
margin-right: 6px;
&::before {
position: absolute;
display: inline-block;
height: 6px;
background: #ffffff;
content: "";
top: 0;
left: 0;
right: 100%;
bottom: 0;
-webkit-animation: progress 5s linear 0s;
-moz-animation: progress 5s linear 0s;
-ms-animation: progress 5s linear 0s;
-o-animation: progress 5s linear 0s;
animation: progress 5s linear 0s;
}
}
&.active ~ li {
background: none;
}
&:focus,
&:hover {
}
@-moz-keyframes progress { 100% { right: 0px; } }
@-webkit-keyframes progress { 100% { right: 0px; } }
@-ms-keyframes progress { 100% { right: 0px; } }
@-o-keyframes progress { 100% { right: 0px; } }
@keyframes progress { 100% { right: 0px; } }
}
}
}
View Compiled
jQuery(document).ready(function(){
var $ = jQuery;
var $carousel = $('.carousel');
if($carousel.find('.carousel-inner > .item').size() <= 1) {
$carousel.find('.carousel-control').remove();
$carousel.find('.carousel-indicators').remove();
}
$carousel.find('.carousel-inner > .item').each(function(i) {
(i === 0) ? $carousel.find('.carousel-indicators').append("<li data-target='#"+$carousel.attr('id')+"' data-slide-to='"+i+"' class='active'></li>") : $carousel.find('.carousel-indicators').append("<li data-target='#"+$carousel.attr('id')+"' data-slide-to='"+i+"'></li>");
var src = $(this).find('img').attr('src');
if(src) {
$(this).css('background','url('+src+')');
}
});
$carousel.find('.carousel-inner > .item').first().addClass('active');
});
