1 // Notes on the classes:
3 // 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically)
4 // even when their scroll action started on a carousel, but for compatibility (with Firefox)
5 // we're preventing all actions instead
6 // 2. The .carousel-item-left and .carousel-item-right is used to indicate where
7 // the active slide is heading.
8 // 3. .active.carousel-item is the current slide.
9 // 4. .active.carousel-item-left and .active.carousel-item-right is the current
10 // slide in its in-transition state. Only one of these occurs at a time.
11 // 5. .carousel-item-next.carousel-item-left and .carousel-item-prev.carousel-item-right
12 // is the upcoming slide in transition.
18 .carousel.pointer-event {
35 backface-visibility: hidden;
36 @include transition($carousel-transition);
39 .carousel-item.active,
45 .carousel-item-next:not(.carousel-item-left),
46 .active.carousel-item-right {
47 transform: translateX(100%);
50 .carousel-item-prev:not(.carousel-item-right),
51 .active.carousel-item-left {
52 transform: translateX(-100%);
57 // Alternate transitions
63 transition-property: opacity;
67 .carousel-item.active,
68 .carousel-item-next.carousel-item-left,
69 .carousel-item-prev.carousel-item-right {
74 .active.carousel-item-left,
75 .active.carousel-item-right {
78 @include transition(opacity 0s $carousel-transition-duration);
84 // Left/right controls for nav
87 .carousel-control-prev,
88 .carousel-control-next {
93 // Use flex for alignment (1-3)
94 display: flex; // 1. allow flex styles
95 align-items: center; // 2. vertically center contents
96 justify-content: center; // 3. horizontally center contents
97 width: $carousel-control-width;
98 color: $carousel-control-color;
100 opacity: $carousel-control-opacity;
101 @include transition($carousel-control-transition);
104 @include hover-focus() {
105 color: $carousel-control-color;
106 text-decoration: none;
108 opacity: $carousel-control-hover-opacity;
111 .carousel-control-prev {
113 @if $enable-gradients {
114 background-image: linear-gradient(90deg, rgba($black, .25), rgba($black, .001));
117 .carousel-control-next {
119 @if $enable-gradients {
120 background-image: linear-gradient(270deg, rgba($black, .25), rgba($black, .001));
125 .carousel-control-prev-icon,
126 .carousel-control-next-icon {
127 display: inline-block;
128 width: $carousel-control-icon-width;
129 height: $carousel-control-icon-width;
130 background: 50% / 100% 100% no-repeat;
132 .carousel-control-prev-icon {
133 background-image: escape-svg($carousel-control-prev-icon-bg);
135 .carousel-control-next-icon {
136 background-image: escape-svg($carousel-control-next-icon-bg);
140 // Optional indicator pips
142 // Add an ordered list with the following class and add a list item for each
143 // slide your carousel holds.
145 .carousel-indicators {
152 justify-content: center;
153 padding-left: 0; // override <ol> default
154 // Use the .carousel-control's width as margin so we don't overlay those
155 margin-right: $carousel-control-width;
156 margin-left: $carousel-control-width;
160 box-sizing: content-box;
162 width: $carousel-indicator-width;
163 height: $carousel-indicator-height;
164 margin-right: $carousel-indicator-spacer;
165 margin-left: $carousel-indicator-spacer;
168 background-color: $carousel-indicator-active-bg;
169 background-clip: padding-box;
170 // Use transparent borders to increase the hit area by 10px on top and bottom.
171 border-top: $carousel-indicator-hit-area-height solid transparent;
172 border-bottom: $carousel-indicator-hit-area-height solid transparent;
174 @include transition($carousel-indicator-transition);
189 right: (100% - $carousel-caption-width) / 2;
191 left: (100% - $carousel-caption-width) / 2;
194 padding-bottom: 20px;
195 color: $carousel-caption-color;