// // 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; }