1 // 2 // Carousel 3 // -------------------------------------------------- 4 5 6 // Wrapper for the slide container and indicators 7 .carousel { 8 position: relative; 9 } 10 11 .carousel-inner { 12 position: relative; 13 overflow: hidden; 14 width: 100%; 15 16 > .item { 17 display: none; 18 position: relative; 19 .transition(.6s ease-in-out left); 20 21 // Account for jankitude on images 22 > img, 23 > a > img { 24 &:extend(.img-responsive); 25 line-height: 1; 26 } 27 28 // WebKit CSS3 transforms for supported devices 29 @media all and (transform-3d), (-webkit-transform-3d) { 30 .transition-transform(~'0.6s ease-in-out'); 31 .backface-visibility(~'hidden'); 32 .perspective(1000); 33 34 &.next, 35 &.active.right { 36 .translate3d(100%, 0, 0); 37 left: 0; 38 } 39 &.prev, 40 &.active.left { 41 .translate3d(-100%, 0, 0); 42 left: 0; 43 } 44 &.next.left, 45 &.prev.right, 46 &.active { 47 .translate3d(0, 0, 0); 48 left: 0; 49 } 50 } 51 } 52 53 > .active, 54 > .next, 55 > .prev { 56 display: block; 57 } 58 59 > .active { 60 left: 0; 61 } 62 63 > .next, 64 > .prev { 65 position: absolute; 66 top: 0; 67 width: 100%; 68 } 69 70 > .next { 71 left: 100%; 72 } 73 > .prev { 74 left: -100%; 75 } 76 > .next.left, 77 > .prev.right { 78 left: 0; 79 } 80 81 > .active.left { 82 left: -100%; 83 } 84 > .active.right { 85 left: 100%; 86 } 87 88 } 89 90 // Left/right controls for nav 91 // --------------------------- 92 93 .carousel-control { 94 position: absolute; 95 top: 0; 96 left: 0; 97 bottom: 0; 98 width: @carousel-control-width; 99 .opacity(@carousel-control-opacity); 100 font-size: @carousel-control-font-size; 101 color: @carousel-control-color; 102 text-align: center; 103 text-shadow: @carousel-text-shadow; 104 // We can't have this transition here because WebKit cancels the carousel 105 // animation if you trip this while in the middle of another animation. 106 107 // Set gradients for backgrounds 108 &.left { 109 #gradient > .horizontal(@start-color: rgba(0,0,0,.5); @end-color: rgba(0,0,0,.0001)); 110 } 111 &.right { 112 left: auto; 113 right: 0; 114 #gradient > .horizontal(@start-color: rgba(0,0,0,.0001); @end-color: rgba(0,0,0,.5)); 115 } 116 117 // Hover/focus state 118 &:hover, 119 &:focus { 120 outline: 0; 121 color: @carousel-control-color; 122 text-decoration: none; 123 .opacity(.9); 124 } 125 126 // Toggles 127 .icon-prev, 128 .icon-next, 129 .glyphicon-chevron-left, 130 .glyphicon-chevron-right { 131 position: absolute; 132 top: 50%; 133 z-index: 5; 134 display: inline-block; 135 } 136 .icon-prev, 137 .glyphicon-chevron-left { 138 left: 50%; 139 margin-left: -10px; 140 } 141 .icon-next, 142 .glyphicon-chevron-right { 143 right: 50%; 144 margin-right: -10px; 145 } 146 .icon-prev, 147 .icon-next { 148 width: 20px; 149 height: 20px; 150 margin-top: -10px; 151 line-height: 1; 152 font-family: serif; 153 } 154 155 156 .icon-prev { 157 &:before { 158 content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039) 159 } 160 } 161 .icon-next { 162 &:before { 163 content: '\203a';// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A) 164 } 165 } 166 } 167 168 // Optional indicator pips 169 // 170 // Add an unordered list with the following class and add a list item for each 171 // slide your carousel holds. 172 173 .carousel-indicators { 174 position: absolute; 175 bottom: 10px; 176 left: 50%; 177 z-index: 15; 178 width: 60%; 179 margin-left: -30%; 180 padding-left: 0; 181 list-style: none; 182 text-align: center; 183 184 li { 185 display: inline-block; 186 width: 10px; 187 height: 10px; 188 margin: 1px; 189 text-indent: -999px; 190 border: 1px solid @carousel-indicator-border-color; 191 border-radius: 10px; 192 cursor: pointer; 193 194 // IE8-9 hack for event handling 195 // 196 // Internet Explorer 8-9 does not support clicks on elements without a set 197 // `background-color`. We cannot use `filter` since that's not viewed as a 198 // background color by the browser. Thus, a hack is needed. 199 // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Internet_Explorer 200 // 201 // For IE8, we set solid black as it doesn't support `rgba()`. For IE9, we 202 // set alpha transparency for the best results possible. 203 background-color: #000 \9; // IE8 204 background-color: rgba(0,0,0,0); // IE9 205 } 206 .active { 207 margin: 0; 208 width: 12px; 209 height: 12px; 210 background-color: @carousel-indicator-active-bg; 211 } 212 } 213 214 // Optional captions 215 // ----------------------------- 216 // Hidden by default for smaller viewports 217 .carousel-caption { 218 position: absolute; 219 left: 15%; 220 right: 15%; 221 bottom: 20px; 222 z-index: 10; 223 padding-top: 20px; 224 padding-bottom: 20px; 225 color: @carousel-caption-color; 226 text-align: center; 227 text-shadow: @carousel-text-shadow; 228 & .btn { 229 text-shadow: none; // No shadow for button elements in carousel-caption 230 } 231 } 232 233 234 // Scale up controls for tablets and up 235 @media screen and (min-width: @screen-sm-min) { 236 237 // Scale up the controls a smidge 238 .carousel-control { 239 .glyphicon-chevron-left, 240 .glyphicon-chevron-right, 241 .icon-prev, 242 .icon-next { 243 width: 30px; 244 height: 30px; 245 margin-top: -15px; 246 font-size: 30px; 247 } 248 .glyphicon-chevron-left, 249 .icon-prev { 250 margin-left: -15px; 251 } 252 .glyphicon-chevron-right, 253 .icon-next { 254 margin-right: -15px; 255 } 256 } 257 258 // Show and left align the captions 259 .carousel-caption { 260 left: 20%; 261 right: 20%; 262 padding-bottom: 30px; 263 } 264 265 // Move up the indicators 266 .carousel-indicators { 267 bottom: 20px; 268 } 269 } 270
