carousel.less 3.70 KiB
//
// Carousel
// --------------------------------------------------
// Wrapper for the slide container and indicators
.carousel {
  position: relative;
.carousel-inner {
  position: relative;
  overflow: hidden;
  width: 100%;
  > .item {
    display: none;
    position: relative;
    .transition(.6s ease-in-out left);
    // Account for jankitude on images
    > img,
    > a > img {
      .img-responsive();
      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: 0;
  left: 0;
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
bottom: 0; width: 15%; .opacity(.5); font-size: 20px; color: @carousel-control-color; text-align: center; text-shadow: @carousel-text-shadow; // We can't have this transition here because webkit cancels the carousel // animation if you trip this while in the middle of another animation. // Set gradients for backgrounds &.left { #gradient > .horizontal(@start-color: rgba(0,0,0,.5); @end-color: rgba(0,0,0,.0001)); background-color: transparent; } &.right { left: auto; right: 0; #gradient > .horizontal(@start-color: rgba(0,0,0,.0001); @end-color: rgba(0,0,0,.5)); background-color: transparent; } // Hover/focus state &:hover, &:focus { color: @carousel-control-color; text-decoration: none; .opacity(.9); } // Toggles .glyphicon, .icon-prev, .icon-next { position: absolute; top: 50%; left: 50%; z-index: 5; display: inline-block; width: 20px; height: 20px; margin-top: -10px; margin-left: -10px; } // Non-glyphicon toggles .icon-prev { &:before { content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039) } } .icon-next { &:before { content: '\203a';// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A) } } } // Optional indicator pips // ----------------------------- .carousel-indicators { position: absolute; bottom: 10px; left: 50%; z-index: 15; width: 120px; margin-left: -60px; padding-left: 0; list-style: none; text-align: center;
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205
li { display: inline-block; width: 10px; height: 10px; margin: 1px; text-indent: -999px; border: 1px solid @carousel-indicator-border-color; border-radius: 10px; cursor: pointer; } .active { margin: 0; width: 12px; height: 12px; background-color: @carousel-indicator-active-bg; } } // Optional captions // ----------------------------- // Hidden by default for smaller viewports .carousel-caption { position: absolute; left: 15%; right: 15%; bottom: 20px; z-index: 10; padding-top: 20px; padding-bottom: 20px; color: @carousel-caption-color; text-align: center; text-shadow: @carousel-text-shadow; & .btn { text-shadow: none; // No shadow for button elements in carousel-caption } } // Scale up controls for tablets and up @media screen and (min-width: @screen-tablet) { // Scale up the controls a smidge .carousel-control .glyphicon, .carousel-control .icon-prev, .carousel-control .icon-next { width: 30px; height: 30px; margin-top: -15px; margin-left: -15px; font-size: 30px; } // Show and left align the captions .carousel-caption { left: 20%; right: 20%; padding-bottom: 30px; } // Move up the indicators .carousel-indicators { bottom: 20px; } }