// // Carousel // ————————————————–
.carousel {
position: relative; margin-bottom: @baseLineHeight; line-height: 1;
}
.carousel-inner {
overflow: hidden; width: 100%; position: relative;
}
.carousel-inner {
> .item { display: none; position: relative; .transition(.6s ease-in-out left); // Account for jankitude on images > img, > a > img { display: block; line-height: 1; } } > .active, > .next, > .prev { display: block; } > .active { left: 0; } > .next, > .prev { position: absolute; top: 0; width: 100%; } > .next { left: 100%; } > .prev { left: -100%; } > .next.left, > .prev.right { left: 0; } > .active.left { left: -100%; } > .active.right { left: 100%; }
}
// Left/right controls for nav // —————————
.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: @white; text-align: center; background: @grayDarker; border: 3px solid @white; .border-radius(23px); .opacity(50); // we can't have this transition here // because webkit cancels the carousel // animation if you trip this while // in the middle of another animation // ;_; // .transition(opacity .2s linear); // Reposition the right one &.right { left: auto; right: 15px; } // Hover/focus state &:hover, &:focus { color: @white; text-decoration: none; .opacity(90); }
}
// Carousel indicator pips // —————————– .carousel-indicators {
position: absolute; top: 15px; right: 15px; z-index: 5; margin: 0; list-style: none; li { display: block; float: left; width: 10px; height: 10px; margin-left: 5px; text-indent: -999px; background-color: #ccc; background-color: rgba(255,255,255,.25); border-radius: 5px; } .active { background-color: #fff; }
}
// Caption for text below images // —————————–
.carousel-caption {
position: absolute; left: 0; right: 0; bottom: 0; padding: 15px; background: @grayDark; background: rgba(0,0,0,.75);
} .carousel-caption h4, .carousel-caption p {
color: @white; line-height: @baseLineHeight;
} .carousel-caption h4 {
margin: 0 0 5px;
} .carousel-caption p {
margin-bottom: 0;
}