Team:ITB Indonesia/template/ITB Indonesia-slider-v2.css
From 2013.igem.org
.carousel {
position: relative; margin-bottom: 20px; line-height: 1;
}
.carousel-inner {
position: relative; width: 100%; overflow: hidden;
}
.carousel-inner > .item {
position: relative; display: none; -webkit-transition: 0.6s ease-in-out left; -moz-transition: 0.6s ease-in-out left; -o-transition: 0.6s ease-in-out left; transition: 0.6s ease-in-out left;
}
.carousel-inner > .item > img, .carousel-inner > .item > a > img {
display: block; line-height: 1;
}
.carousel-inner > .active, .carousel-inner > .next, .carousel-inner > .prev {
display: block;
}
.carousel-inner > .active {
left: 0;
}
.carousel-inner > .next, .carousel-inner > .prev {
position: absolute; top: 0; width: 100%;
}
.carousel-inner > .next {
left: 100%;
}
.carousel-inner > .prev {
left: -100%;
}
.carousel-inner > .next.left, .carousel-inner > .prev.right {
left: 0;
}
.carousel-inner > .active.left {
left: -100%;
}
.carousel-inner > .active.right {
left: 100%;
}
.carousel-control {
position: absolute; top: 40%; left: 15px; width: 40px; height: 40px; margin-top: -20px; font-size: 60px; font-weight: 100; line-height: 30px; color: #ffffff; text-align: center; background: #222222; border: 3px solid #ffffff; -webkit-border-radius: 23px; -moz-border-radius: 23px; border-radius: 23px; opacity: 0.5; filter: alpha(opacity=50);
}
.carousel-control.right {
right: 15px; left: auto;
}
.carousel-control:hover, .carousel-control:focus {
color: #ffffff; text-decoration: none; opacity: 0.9; filter: alpha(opacity=90);
}
.carousel-indicators {
position: absolute; top: 15px; right: 15px; z-index: 5; margin: 0; list-style: none;
}
.carousel-indicators li {
display: block; float: left; width: 10px; height: 10px; margin-left: 5px; text-indent: -999px; background-color: #ccc; background-color: rgba(255, 255, 255, 0.25); border-radius: 5px;
}
.carousel-indicators .active {
background-color: #fff;
}
.carousel-caption {
position: absolute; right: 0; bottom: 0; left: 0; padding: 15px; background: #333333; background: rgba(0, 0, 0, 0.75);
}
.carousel-caption h4, .carousel-caption p {
line-height: 20px; color: #ffffff;
}
.carousel-caption h4 {
margin: 0 0 5px;
}
.carousel-caption p {
margin-bottom: 0;
}
a:link, a:visited{ text-decoration: none; }
/* Carousel Fade Effect */ .carousel.carousel-fade .item { -webkit-transition: opacity 0.4s ease-in-out; -moz-transition: opacity 0.4s ease-in-out; -ms-transition: opacity 0.4s ease-in-out; -o-transition: opacity 0.4s ease-in-out; transition: opacity 0.4s ease-in-out; opacity:0; }
.carousel.carousel-fade .active.item { opacity:1; }
.carousel.carousel-fade .active.left, .carousel.carousel-fade .active.right { left: 0; z-index: 2; opacity: 0; filter: alpha(opacity=0); }
.carousel.carousel-fade .next, .carousel.carousel-fade .prev { left: 0; z-index: 1; }
.carousel.carousel-fade .carousel-control { z-index: 3; }