1 // Wrapper for the slide container and indicators
17 @include if-supports-3d-transforms() {
18 @include transition($carousel-transition);
19 backface-visibility: hidden;
24 .carousel-item.active,
36 // CSS3 transforms when supported by the browser
37 @include if-supports-3d-transforms() {
38 .carousel-item-next.carousel-item-left,
39 .carousel-item-prev.carousel-item-right {
40 transform: translate3d(0, 0, 0);
44 .active.carousel-item-right {
45 transform: translate3d(100%, 0, 0);
49 .active.carousel-item-left {
50 transform: translate3d(-100%, 0, 0);
56 // Left/right controls for nav
59 .carousel-control-prev,
60 .carousel-control-next {
64 // Use flex for alignment (1-3)
65 display: flex; // 1. allow flex styles
66 align-items: center; // 2. vertically center contents
67 justify-content: center; // 3. horizontally center contents
68 width: $carousel-control-width;
69 color: $carousel-control-color;
71 opacity: $carousel-control-opacity;
72 // We can't have a transition here because WebKit cancels the carousel
73 // animation if you trip this while in the middle of another animation.
76 @include hover-focus {
77 color: $carousel-control-color;
78 text-decoration: none;
83 .carousel-control-prev {
86 .carousel-control-next {
91 .carousel-control-prev-icon,
92 .carousel-control-next-icon {
93 display: inline-block;
94 width: $carousel-control-icon-width;
95 height: $carousel-control-icon-width;
96 background: transparent no-repeat center center;
97 background-size: 100% 100%;
99 .carousel-control-prev-icon {
100 background-image: $carousel-control-prev-icon-bg;
102 .carousel-control-next-icon {
103 background-image: $carousel-control-next-icon-bg;
107 // Optional indicator pips
109 // Add an ordered list with the following class and add a list item for each
110 // slide your carousel holds.
112 .carousel-indicators {
119 justify-content: center;
120 padding-left: 0; // override <ol> default
121 // Use the .carousel-control's width as margin so we don't overlay those
122 margin-right: $carousel-control-width;
123 margin-left: $carousel-control-width;
129 max-width: $carousel-indicator-width;
130 height: $carousel-indicator-height;
131 margin-right: $carousel-indicator-spacer;
132 margin-left: $carousel-indicator-spacer;
135 background-color: rgba($carousel-indicator-active-bg, .5);
137 // Use pseudo classes to increase the hit area by 10px on top and bottom.
142 display: inline-block;
151 display: inline-block;
159 background-color: $carousel-indicator-active-bg;
170 right: ((100% - $carousel-caption-width) / 2);
172 left: ((100% - $carousel-caption-width) / 2);
175 padding-bottom: 20px;
176 color: $carousel-caption-color;