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-start and .carousel-item-end 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-start and .active.carousel-item-end 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-start and .carousel-item-prev.carousel-item-end
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 /* rtl:begin:ignore */
46 .carousel-item-next:not(.carousel-item-start),
47 .active.carousel-item-end {
48 transform: translateX(100%);
51 .carousel-item-prev:not(.carousel-item-end),
52 .active.carousel-item-start {
53 transform: translateX(-100%);
60 // Alternate transitions
66 transition-property: opacity;
70 .carousel-item.active,
71 .carousel-item-next.carousel-item-start,
72 .carousel-item-prev.carousel-item-end {
77 .active.carousel-item-start,
78 .active.carousel-item-end {
81 @include transition(opacity 0s $carousel-transition-duration);
87 // Left/right controls for nav
90 .carousel-control-prev,
91 .carousel-control-next {
96 // Use flex for alignment (1-3)
97 display: flex; // 1. allow flex styles
98 align-items: center; // 2. vertically center contents
99 justify-content: center; // 3. horizontally center contents
100 width: $carousel-control-width;
102 color: $carousel-control-color;
106 opacity: $carousel-control-opacity;
107 @include transition($carousel-control-transition);
112 color: $carousel-control-color;
113 text-decoration: none;
115 opacity: $carousel-control-hover-opacity;
118 .carousel-control-prev {
120 background-image: if($enable-gradients, linear-gradient(90deg, rgba($black, .25), rgba($black, .001)), null);
122 .carousel-control-next {
124 background-image: if($enable-gradients, linear-gradient(270deg, rgba($black, .25), rgba($black, .001)), null);
128 .carousel-control-prev-icon,
129 .carousel-control-next-icon {
130 display: inline-block;
131 width: $carousel-control-icon-width;
132 height: $carousel-control-icon-width;
133 background-repeat: no-repeat;
134 background-position: 50%;
135 background-size: 100% 100%;
141 "name" : "prev-next",
146 .carousel-control-prev-icon {
147 background-image: escape-svg($carousel-control-prev-icon-bg);
149 .carousel-control-next-icon {
150 background-image: escape-svg($carousel-control-next-icon-bg);
153 // Optional indicator pips/controls
155 // Add a container (such as a list) with the following class and add an item (ideally a focusable control,
156 // like a button) with data-bs-target for each slide your carousel holds.
158 .carousel-indicators {
165 justify-content: center;
167 // Use the .carousel-control's width as margin so we don't overlay those
168 margin-right: $carousel-control-width;
170 margin-left: $carousel-control-width;
174 box-sizing: content-box;
176 width: $carousel-indicator-width;
177 height: $carousel-indicator-height;
179 margin-right: $carousel-indicator-spacer;
180 margin-left: $carousel-indicator-spacer;
183 background-color: $carousel-indicator-active-bg;
184 background-clip: padding-box;
186 // Use transparent borders to increase the hit area by 10px on top and bottom.
187 border-top: $carousel-indicator-hit-area-height solid transparent;
188 border-bottom: $carousel-indicator-hit-area-height solid transparent;
189 opacity: $carousel-indicator-opacity;
190 @include transition($carousel-indicator-transition);
194 opacity: $carousel-indicator-active-opacity;
205 right: (100% - $carousel-caption-width) * .5;
206 bottom: $carousel-caption-spacer;
207 left: (100% - $carousel-caption-width) * .5;
208 padding-top: $carousel-caption-padding-y;
209 padding-bottom: $carousel-caption-padding-y;
210 color: $carousel-caption-color;
214 // Dark mode carousel
217 .carousel-control-prev-icon,
218 .carousel-control-next-icon {
219 filter: $carousel-dark-control-icon-filter;
222 .carousel-indicators [data-bs-target] {
223 background-color: $carousel-dark-indicator-active-bg;
227 color: $carousel-dark-caption-color;