// Wrapper for the slide container and indicators .carousel { position: relative; } .carousel-inner { position: relative; width: 100%; overflow: hidden; } .carousel-item { position: relative; display: none; width: 100%; @include if-supports-3d-transforms() { @include transition($carousel-transition); backface-visibility: hidden; perspective: 1000px; } } .carousel-item.active, .carousel-item-next, .carousel-item-prev { display: block; } .carousel-item-next, .carousel-item-prev { position: absolute; top: 0; } // CSS3 transforms when supported by the browser @include if-supports-3d-transforms() { .carousel-item-next.carousel-item-left, .carousel-item-prev.carousel-item-right { transform: translate3d(0, 0, 0); } .carousel-item-next, .active.carousel-item-right { transform: translate3d(100%, 0, 0); } .carousel-item-prev, .active.carousel-item-left { transform: translate3d(-100%, 0, 0); } } // // Left/right controls for nav // .carousel-control-prev, .carousel-control-next { position: absolute; top: 0; bottom: 0; width: $carousel-control-width; color: $carousel-control-color; text-align: center; opacity: $carousel-control-opacity; // We can't have a transition here because WebKit cancels the carousel // animation if you trip this while in the middle of another animation. // Hover/focus state @include hover-focus { color: $carousel-control-color; text-decoration: none; outline: 0; opacity: .9; } } .carousel-control-prev { left: 0; } .carousel-control-next { right: 0; } // Icons for within .carousel-control-prev-icon, .carousel-control-next-icon { position: absolute; top: 50%; z-index: 5; display: inline-block; width: $carousel-control-icon-width; height: $carousel-control-icon-width; margin-top: -($carousel-control-icon-width / 2); font-family: serif; line-height: 1; background: transparent no-repeat center center; background-size: 100% 100%; } .carousel-control-prev-icon { left: 50%; margin-left: -($carousel-control-icon-width / 2); background-image: $carousel-control-prev-icon-bg; } .carousel-control-next-icon { right: 50%; margin-right: -($carousel-control-icon-width / 2); background-image: $carousel-control-next-icon-bg; } // Optional indicator pips // // Add an unordered list with the following class and add a list item for each // slide your carousel holds. .carousel-indicators { position: absolute; right: 0; bottom: 10px; left: 0; z-index: 15; padding-left: 0; // override