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(0s $carousel-transition-duration opacity);
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: linear-gradient(90deg, rgba($black, .25), rgba($black, .001));
117 .carousel-control-next {
119 @if $enable-gradients {
120 background: 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: transparent no-repeat center center;
131 background-size: 100% 100%;
133 .carousel-control-prev-icon {
134 background-image: $carousel-control-prev-icon-bg;
136 .carousel-control-next-icon {
137 background-image: $carousel-control-next-icon-bg;
141 // Optional indicator pips
143 // Add an ordered list with the following class and add a list item for each
144 // slide your carousel holds.
146 .carousel-indicators {
153 justify-content: center;
154 padding-left: 0; // override <ol> default
155 // Use the .carousel-control's width as margin so we don't overlay those
156 margin-right: $carousel-control-width;
157 margin-left: $carousel-control-width;
161 box-sizing: content-box;
163 width: $carousel-indicator-width;
164 height: $carousel-indicator-height;
165 margin-right: $carousel-indicator-spacer;
166 margin-left: $carousel-indicator-spacer;
169 background-color: $carousel-indicator-active-bg;
170 background-clip: padding-box;
171 // Use transparent borders to increase the hit area by 10px on top and bottom.
172 border-top: $carousel-indicator-hit-area-height solid transparent;
173 border-bottom: $carousel-indicator-hit-area-height solid transparent;
175 @include transition($carousel-indicator-transition);
190 right: ((100% - $carousel-caption-width) / 2);
192 left: ((100% - $carousel-caption-width) / 2);
195 padding-bottom: 20px;
196 color: $carousel-caption-color;