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