1 // Notes on the classes:
3 // 1. The .carousel-item-left and .carousel-item-right is used to indicate where
4 // the active slide is heading.
5 // 2. .active.carousel-item is the current slide.
6 // 3. .active.carousel-item-left and .active.carousel-item-right is the current
7 // slide in its in-transition state. Only one of these occurs at a time.
8 // 4. .carousel-item-next.carousel-item-left and .carousel-item-prev.carousel-item-right
9 // is the upcoming slide in transition.
26 backface-visibility: hidden;
30 .carousel-item.active,
34 @include transition($carousel-transition);
43 .carousel-item-next.carousel-item-left,
44 .carousel-item-prev.carousel-item-right {
45 transform: translateX(0);
47 @supports (transform-style: preserve-3d) {
48 transform: translate3d(0, 0, 0);
53 .active.carousel-item-right {
54 transform: translateX(100%);
56 @supports (transform-style: preserve-3d) {
57 transform: translate3d(100%, 0, 0);
62 .active.carousel-item-left {
63 transform: translateX(-100%);
65 @supports (transform-style: preserve-3d) {
66 transform: translate3d(-100%, 0, 0);
72 // Alternate transitions
78 transition-duration: .6s;
79 transition-property: opacity;
82 .carousel-item.active,
83 .carousel-item-next.carousel-item-left,
84 .carousel-item-prev.carousel-item-right {
88 .active.carousel-item-left,
89 .active.carousel-item-right {
95 .carousel-item.active,
96 .active.carousel-item-left,
97 .active.carousel-item-prev {
98 transform: translateX(0);
100 @supports (transform-style: preserve-3d) {
101 transform: translate3d(0, 0, 0);
108 // Left/right controls for nav
111 .carousel-control-prev,
112 .carousel-control-next {
116 // Use flex for alignment (1-3)
117 display: flex; // 1. allow flex styles
118 align-items: center; // 2. vertically center contents
119 justify-content: center; // 3. horizontally center contents
120 width: $carousel-control-width;
121 color: $carousel-control-color;
123 opacity: $carousel-control-opacity;
124 // We can't have a transition here because WebKit cancels the carousel
125 // animation if you trip this while in the middle of another animation.
128 @include hover-focus {
129 color: $carousel-control-color;
130 text-decoration: none;
135 .carousel-control-prev {
137 @if $enable-gradients {
138 background: linear-gradient(90deg, rgba($black, .25), rgba($black, .001));
141 .carousel-control-next {
143 @if $enable-gradients {
144 background: linear-gradient(270deg, rgba($black, .25), rgba($black, .001));
149 .carousel-control-prev-icon,
150 .carousel-control-next-icon {
151 display: inline-block;
152 width: $carousel-control-icon-width;
153 height: $carousel-control-icon-width;
154 background: transparent no-repeat center center;
155 background-size: 100% 100%;
157 .carousel-control-prev-icon {
158 background-image: $carousel-control-prev-icon-bg;
160 .carousel-control-next-icon {
161 background-image: $carousel-control-next-icon-bg;
165 // Optional indicator pips
167 // Add an ordered list with the following class and add a list item for each
168 // slide your carousel holds.
170 .carousel-indicators {
177 justify-content: center;
178 padding-left: 0; // override <ol> default
179 // Use the .carousel-control's width as margin so we don't overlay those
180 margin-right: $carousel-control-width;
181 margin-left: $carousel-control-width;
187 width: $carousel-indicator-width;
188 height: $carousel-indicator-height;
189 margin-right: $carousel-indicator-spacer;
190 margin-left: $carousel-indicator-spacer;
193 background-color: rgba($carousel-indicator-active-bg, .5);
195 // Use pseudo classes to increase the hit area by 10px on top and bottom.
200 display: inline-block;
209 display: inline-block;
217 background-color: $carousel-indicator-active-bg;
228 right: ((100% - $carousel-caption-width) / 2);
230 left: ((100% - $carousel-caption-width) / 2);
233 padding-bottom: 20px;
234 color: $carousel-caption-color;