1// CAROUSEL 2// -------- 3 4.carousel { 5 position: relative; 6 margin-bottom: @baseLineHeight; 7 line-height: 1; 8} 9 10.carousel-inner { 11 overflow: hidden; 12 width: 100%; 13 position: relative; 14} 15 16.carousel { 17 18 .item { 19 display: none; 20 position: relative; 21 .transition(.6s ease-in-out left); 22 } 23 24 // Account for jankitude on images 25 .item > img { 26 display: block; 27 line-height: 1; 28 } 29 30 .active, 31 .next, 32 .prev { display: block; } 33 34 .active { 35 left: 0; 36 } 37 38 .next, 39 .prev { 40 position: absolute; 41 top: 0; 42 width: 100%; 43 } 44 45 .next { 46 left: 100%; 47 } 48 .prev { 49 left: -100%; 50 } 51 .next.left, 52 .prev.right { 53 left: 0; 54 } 55 56 .active.left { 57 left: -100%; 58 } 59 .active.right { 60 left: 100%; 61 } 62 63} 64 65// Left/right controls for nav 66// --------------------------- 67 68.carousel-control { 69 position: absolute; 70 top: 40%; 71 left: 15px; 72 width: 40px; 73 height: 40px; 74 margin-top: -20px; 75 font-size: 60px; 76 font-weight: 100; 77 line-height: 30px; 78 color: @white; 79 text-align: center; 80 background: @grayDarker; 81 border: 3px solid @white; 82 .border-radius(23px); 83 .opacity(50); 84 85 // we can't have this transition here 86 // because webkit cancels the carousel 87 // animation if you trip this while 88 // in the middle of another animation 89 // ;_; 90 // .transition(opacity .2s linear); 91 92 // Reposition the right one 93 &.right { 94 left: auto; 95 right: 15px; 96 } 97 98 // Hover state 99 &:hover { 100 color: @white; 101 text-decoration: none; 102 .opacity(90); 103 } 104} 105 106// Caption for text below images 107// ----------------------------- 108 109.carousel-caption { 110 position: absolute; 111 left: 0; 112 right: 0; 113 bottom: 0; 114 padding: 10px 15px 5px; 115 background: @grayDark; 116 background: rgba(0,0,0,.75); 117} 118.carousel-caption h4, 119.carousel-caption p { 120 color: @white; 121} 122