Carousel
Vue Bootstrap 5 Carousel component
Responsive Vue carousel built with the latest Bootstrap 5. Carousel is a slideshow cycling through different elements such as photos, videos, or text. Many examples and easy tutorials.
A slideshow component for cycling through elements—images or slides of text—like a carousel.
Note: Read the API tab to find all available options and advanced customization
Basic example
.webp)
First slide label
Nulla vitae elit libero, a pharetra augue mollis interdum.
.webp)
Second slide label
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.webp)
Third slide label
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
<template>
<MDBCarousel
v-model="carousel1"
:items="items1"
fade
/>
</template>
<script>
import { ref } from "vue";
import { MDBCarousel } from "mdb-vue-ui-kit";
export default {
components: {
MDBCarousel
},
setup() {
const items1 = [
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(15).webp",
alt: "...",
label: "First slide label",
caption: "Nulla vitae elit libero, a pharetra augue mollis interdum."
},
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(22).webp",
alt: "...",
label: "Second slide label",
caption: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
},
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(23).webp",
alt: "...",
label: "Third slide label",
caption:
"Praesent commodo cursus magna, vel scelerisque nisl consectetur."
}
];
const carousel1 = ref(0);
return {
items1,
carousel1
};
}
};
</script>
<script setup lang="ts">
import { ref } from "vue";
import { MDBCarousel } from "mdb-vue-ui-kit";
const items1 = [
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(15).webp",
alt: "...",
label: "First slide label",
caption: "Nulla vitae elit libero, a pharetra augue mollis interdum."
},
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(22).webp",
alt: "...",
label: "Second slide label",
caption: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
},
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(23).webp",
alt: "...",
label: "Third slide label",
caption:
"Praesent commodo cursus magna, vel scelerisque nisl consectetur."
}
];
const carousel1 = ref(0);
</script>
How it works
The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.
In browsers where the Page Visibility API is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.).
Note: Please be aware that nested carousels are not supported, and carousels are generally not compliant with accessibility standards.
Carousels don’t automatically normalize slide dimensions. As such, you may need to use additional utilities or custom styles to appropriately size content. While carousels support previous/next controls and indicators, they’re not explicitly required. Add and customize as you see fit.
Variations
Slides only
Here’s a carousel with slides only. By default itemsClass property contains
.d-block and .w-100 to prevent browser default
image alignment.
<template>
<MDBCarousel
v-model="carousel2"
:items="items2"
:controls="false"
:indicators="false"
/>
</template>
<script>
import { ref } from "vue";
import { MDBCarousel } from "mdb-vue-ui-kit";
export default {
components: {
MDBCarousel
},
setup() {
const items2 = [
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(15).webp",
alt: "..."
},
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(22).webp",
alt: "..."
},
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(23).webp",
alt: "..."
}
];
const carousel2 = ref(0);
return {
items2,
carousel2
};
}
};
</script>
<script setup lang="ts">
import { ref } from "vue";
import { MDBCarousel } from "mdb-vue-ui-kit";
const items2 = [
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(15).webp",
alt: "..."
},
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(22).webp",
alt: "..."
},
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(23).webp",
alt: "..."
}
];
const carousel2 = ref(0);
</script>
With controls
Previous and next controls are added by default. Change the controls property to turn arrows on or
off.
<template>
<MDBCarousel
v-model="carousel3"
:items="items3"
:indicators="false"
/>
</template>
<script>
import { ref } from "vue";
import { MDBCarousel } from "mdb-vue-ui-kit";
export default {
components: {
MDBCarousel
},
setup() {
const items3 = [
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(15).webp",
alt: "..."
},
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(22).webp",
alt: "..."
},
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(23).webp",
alt: "..."
}
];
const carousel3 = ref(0);
return {
items3,
carousel3
};
}
};
</script>
<script setup lang="ts">
import { ref } from "vue";
import { MDBCarousel } from "mdb-vue-ui-kit";
const items3 = [
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(15).webp",
alt: "..."
},
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(22).webp",
alt: "..."
},
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(23).webp",
alt: "..."
}
];
const carousel3 = ref(0);
</script>
With indicators
You can also add the indicators to the carousel, alongside the controls. Change the indicators<>
property to enable or disable them.
<template>
<MDBCarousel
v-model="carousel4"
:items="items4"
/>
</template>
<script>
import { ref } from "vue";
import { MDBCarousel } from "mdb-vue-ui-kit";
export default {
components: {
MDBCarousel
},
setup() {
const items4 = [
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(15).webp",
alt: "..."
},
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(22).webp",
alt: "..."
},
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(23).webp",
alt: "..."
}
];
const carousel4 = ref(0);
return {
items4,
carousel4
};
}
};
</script>
<script setup lang="ts">
import { ref } from "vue";
import { MDBCarousel } from "mdb-vue-ui-kit";
const items4 = [
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(15).webp",
alt: "..."
},
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(22).webp",
alt: "..."
},
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(23).webp",
alt: "..."
}
];
const carousel4 = ref(0);
</script>
With captions
Add captions to your slides easily with the
label and caption keys in items array. They can be
easily hidden on smaller viewports, as shown below, with optional
display utilities. We hide them initially
with .d-none and bring them back on medium-sized devices with
.d-md-block. Edit captionsClass property to change default classes.
First slide label
Nulla vitae elit libero, a pharetra augue mollis interdum.
Second slide label
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Third slide label
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
<template>
<MDBCarousel
v-model="carousel5"
:items="items5"
/>
</template>
<script>
import { ref } from "vue";
import { MDBCarousel } from "mdb-vue-ui-kit";
export default {
components: {
MDBCarousel
},
setup() {
const items5 = [
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(15).webp",
alt: "...",
label: "First slide label",
caption: "Nulla vitae elit libero, a pharetra augue mollis interdum."
},
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(22).webp",
alt: "...",
label: "Second slide label",
caption: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
},
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(23).webp",
alt: "...",
label: "Third slide label",
caption:
"Praesent commodo cursus magna, vel scelerisque nisl consectetur."
}
];
const carousel5 = ref(0);
return {
items5,
carousel5
};
}
};
</script>
<script setup lang="ts">
import { ref } from "vue";
import { MDBCarousel } from "mdb-vue-ui-kit";
const items5 = [
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(15).webp",
alt: "...",
label: "First slide label",
caption: "Nulla vitae elit libero, a pharetra augue mollis interdum."
},
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(22).webp",
alt: "...",
label: "Second slide label",
caption: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
},
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(23).webp",
alt: "...",
label: "Third slide label",
caption:
"Praesent commodo cursus magna, vel scelerisque nisl consectetur."
}
];
const carousel5 = ref(0);
</script>
Animation
Add fade property to your MDBCarousel to animate slides with a fade transition
instead of a slide.
<template>
<MDBCarousel
v-model="carousel6"
:items="items6"
:indicators="false"
fade
/>
</template>
<script>
import { ref } from "vue";
import { MDBCarousel } from "mdb-vue-ui-kit";
export default {
components: {
MDBCarousel
},
setup() {
const items6 = [
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(15).webp",
alt: "..."
},
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(22).webp",
alt: "..."
},
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(23).webp",
alt: "..."
}
];
const carousel6 = ref(0);
return {
items6,
carousel6
};
}
};
</script>
<script setup lang="ts">
import { ref } from "vue";
import { MDBCarousel } from "mdb-vue-ui-kit";
const items6 = [
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(15).webp",
alt: "..."
},
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(22).webp",
alt: "..."
},
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(23).webp",
alt: "..."
}
];
const carousel6 = ref(0);
</script>
Crossfade
Use fade transition on your slides easily by adding the
fade prop.
<template>
<MDBCarousel v-model="carousel9" :items="items9" fade />
</template>
<script>
import { ref } from "vue";
import { MDBCarousel } from "mdb-vue-ui-kit";
export default {
components: {
MDBCarousel
},
setup() {
const items9 = [
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(19).jpg",
alt: "...",
},
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(35).jpg",
alt: "...",
},
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(40).jpg",
alt: "...",
},
];
const carousel9 = ref(0);
return {
items9,
carousel9
};
}
};
</script>
<script setup lang="ts">
import { ref } from "vue";
import { MDBCarousel } from "mdb-vue-ui-kit";
const items9 = [
{
src: "https://mdbootstrap.com/img/PhotoSlides/img%20(19).jpg",
alt: "...",
},
{
src: "https://mdbootstrap.com/img/PhotoSlides/img%20(35).jpg",
alt: "...",
},
{
src: "https://mdbootstrap.com/img/PhotoSlides/img%20(40).jpg",
alt: "...",
},
];
const carousel9 = ref(0);
</script>
Individual .carousel-item interval
Add interval key to any image object to change the amount
of time to delay between automatically cycling to the next item.
If the interval is not set, it takes the default value (5000 ms).
Add interval property to the component to change the default amount
of time to delay between automatically cycling items (5000 ms).
<template>
<MDBCarousel
v-model="carousel7"
:items="items7"
fade
/>
</template>
<script>
import { ref } from "vue";
import { MDBCarousel } from "mdb-vue-ui-kit";
export default {
components: {
MDBCarousel
},
setup() {
const items7 = [
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(15).webp",
alt: "...",
interval: 10000
},
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(22).webp",
alt: "...",
interval: 2000
},
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(23).webp",
alt: "..."
}
];
const carousel7 = ref(0);
return {
items7,
carousel7
};
}
};
</script>
<script setup lang="ts">
import { ref } from "vue";
import { MDBCarousel } from "mdb-vue-ui-kit";
const items7 = [
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(15).webp",
alt: "...",
interval: 10000
},
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(22).webp",
alt: "...",
interval: 2000
},
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(23).webp",
alt: "..."
}
];
const carousel7 = ref(0);
</script>
Disable touch swiping
Swiping left/right on touchscreen devices can be disabled by setting the
touch prop to false.
First slide label
Nulla vitae elit libero, a pharetra augue mollis interdum.
Second slide label
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Third slide label
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
<template>
<MDBCarousel
v-model="carousel10"
:items="items7"
:touch="false"
/>
</template>
<script>
import { ref } from "vue";
import { MDBCarousel } from "mdb-vue-ui-kit";
export default {
components: {
MDBCarousel
},
setup() {
const items7 = [
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(15).webp",
alt: "...",
interval: 10000
},
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(22).webp",
alt: "...",
interval: 2000
},
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(23).webp",
alt: "..."
}
];
const carousel9 = ref(0);
return {
items7,
carousel7
};
}
};
</script>
<script setup lang="ts">
import { ref } from "vue";
import { MDBCarousel } from "mdb-vue-ui-kit";
const carousel9 = ref(0);
const items7 = [
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(15).webp",
alt: "...",
interval: 10000
},
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(22).webp",
alt: "...",
interval: 2000
},
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(23).webp",
alt: "..."
}
];
</script>
Material style
If you want to make your carousel look more "material" use the rounded-* and shadow-*
classes to add rounded corners and a shadows.
.webp)
First slide label
Nulla vitae elit libero, a pharetra augue mollis interdum.
.webp)
Second slide label
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.webp)
Third slide label
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
<template>
<MDBCarousel v-model="carousel1" :items="items1" fade innerClass="rounded-5 shadow-4-strong"/>
</template>
<script>
import { ref } from "vue";
import { MDBCarousel } from "mdb-vue-ui-kit";
export default {
components: {
MDBCarousel
},
setup() {
const items1 = [
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(15).webp",
alt: "...",
label: "First slide label",
caption: "Nulla vitae elit libero, a pharetra augue mollis interdum."
},
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(22).webp",
alt: "...",
label: "Second slide label",
caption: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
},
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(23).webp",
alt: "...",
label: "Third slide label",
caption:
"Praesent commodo cursus magna, vel scelerisque nisl consectetur."
}
];
const carousel1 = ref(0);
return {
items1,
carousel1
};
}
};
</script>
<script setup lang="ts">
import { ref } from "vue";
import { MDBCarousel } from "mdb-vue-ui-kit";
const items1 = [
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(15).webp",
alt: "...",
label: "First slide label",
caption: "Nulla vitae elit libero, a pharetra augue mollis interdum."
},
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(22).webp",
alt: "...",
label: "Second slide label",
caption: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
},
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(23).webp",
alt: "...",
label: "Third slide label",
caption:
"Praesent commodo cursus magna, vel scelerisque nisl consectetur."
}
];
const carousel1 = ref(0);
</script>
Dark variant
Add dark property to the MDBCarousel for darker controls, indicators,
and captions.
.webp)
First slide label
Nulla vitae elit libero, a pharetra augue mollis interdum.
.webp)
Second slide label
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.webp)
Third slide label
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
<template>
<MDBCarousel
v-model="carousel8"
:items="items8"
fade
dark
/>
</template>
<script>
import { ref } from "vue";
import { MDBCarousel } from "mdb-vue-ui-kit";
export default {
components: {
MDBCarousel
},
setup() {
const items8 = [
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(19).webp",
alt: "...",
label: "First slide label",
caption: "Nulla vitae elit libero, a pharetra augue mollis interdum."
},
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(35).webp",
alt: "...",
label: "Second slide label",
caption: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
},
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(40).webp",
alt: "...",
label: "Third slide label",
caption:
"Praesent commodo cursus magna, vel scelerisque nisl consectetur."
}
];
const carousel8 = ref(0);
return {
items8,
carousel8
};
}
};
</script>
<script setup lang="ts">
import { ref } from "vue";
import { MDBCarousel } from "mdb-vue-ui-kit";
const items8 = [
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(19).webp",
alt: "...",
label: "First slide label",
caption: "Nulla vitae elit libero, a pharetra augue mollis interdum."
},
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(35).webp",
alt: "...",
label: "Second slide label",
caption: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
},
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(40).webp",
alt: "...",
label: "Third slide label",
caption:
"Praesent commodo cursus magna, vel scelerisque nisl consectetur."
}
];
const carousel8 = ref(0);
</script>
Multi-item carousel
A basic example of a multi carousel with the most common use case with 3 active items (default version).
If you need more advanced options and examples of multi-item carousel have a look at Multi-item Carousel Docs
<template>
<MDBMultiCarousel
:images="[
{
src: 'https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.jpg',
alt: 'Gallery image 1',
class: 'w-100',
},
{
src: 'https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.jpg',
alt: 'Gallery image 2',
class: 'w-100',
},
{
src: 'https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.jpg',
alt: 'Gallery image 3',
class: 'w-100',
},
{
src: 'https://mdbootstrap.com/img/Photos/Thumbnails/Slides/4.jpg',
alt: 'Gallery image 4',
class: 'w-100',
},
]"
/>
</template>
<script>
import { MDBMultiCarousel } from "mdb-vue-multi-carousel";
export default {
components: {
MDBMultiCarousel
}
};
</script>
<script setup lang="ts">
import { MDBMultiCarousel } from "mdb-vue-multi-carousel";
</script>
Carousel - API
Import
<script>
import { MDBCarousel } from "mdb-vue-ui-kit";
</script>
Properties
| Name | Type | Default | Description |
|---|---|---|---|
captionsClass
|
String | "carousel-caption d-none d-md-block" |
Changes captions classNames |
controls
|
Boolean | true |
Enables controls |
dark
|
Boolean | false |
Enables dark mode |
fade
|
Boolean | false |
Enables fade animation effect |
indicators
|
Boolean | true |
Enables indicators |
innerClass
|
String | - | Classes for inner carousel element |
interval
|
[Number, Boolean] | 5000 |
Defines or disables sliding interval |
items
|
Array | |
Defines carousel items. Inside the array you can use objects with keys: src, alt, label, caption, video, videoType, interval |
itemsClass
|
String | "d-block w-100" |
Defines carousel items classNames |
keyboard
|
Boolean | true |
Enables keyboard navigation |
pause
|
[String, Boolean] | "hover" |
Enables pause on hover. If set to
false disable pausing.
|
tag
|
String | "div" |
Defines wrapper tag |
touch
|
Boolean | true |
Enables touch events |
v-model
|
Number | 0 |
Defines active element key |
Methods
| Method | Description |
|---|---|
prev |
Cycles to the previous item. |
next |
Cycles to the next item. |
<template>
<MDBCarousel v-model="testCarousel1" :items="testItems1" ref="refCarousel" :interval="false" />
<MDBBtn @click.stop="refCarousel?.prev()" color="primary" size="sm">Prev</MDBBtn>
<MDBBtn @click.stop="refCarousel?.next()" color="primary" size="sm">Next</MDBBtn>
<MDBBtn @click.stop="testCarousel1 = 0" color="primary" size="sm">0</MDBBtn>
<MDBBtn @click.stop="testCarousel1 = 1" color="primary" size="sm">1</MDBBtn>
<MDBBtn @click.stop="testCarousel1 = 2" color="primary" size="sm">2</MDBBtn>
</template>
<script>
import { ref } from "vue";
import { MDBCarousel } from "mdb-vue-ui-kit";
export default {
components: {
MDBCarousel
},
setup() {
const testItems1 = [
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(15).webp",
alt: "..."
},
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(22).webp",
alt: "..."
},
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(23).webp",
alt: "..."
}
];
const testCarousel1 = ref(0);
const refCarousel = ref(null);
return {
testItems1,
testCarousel1,
};
}
};
</script>
<script setup lang="ts">
import { ref } from "vue";
import { MDBCarousel } from "mdb-vue-ui-kit";
const testItems1 = [
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(15).webp",
alt: "..."
},
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(22).webp",
alt: "..."
},
{
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(23).webp",
alt: "..."
}
];
const testCarousel1 = ref(0);
const refCarousel = ref<InstanceType<typeof MDBCarousel> | null>(null);
</script>
CSS variables
As part of MDB’s evolving CSS variables approach, carousel now uses local CSS variables on
.carousel-control-prev-icon, .carousel-control-next-icon for enhanced real-time
customization. Values for the CSS variables are set via Sass, so Sass customization is still
supported, too.
--#{$prefix}carousel-control-icon-font-size: #{$carousel-control-icon-font-size};
--#{$prefix}carousel-control-icon-font-weight: #{$font-weight-bold};
SCSS variables
$carousel-control-color: $white;
$carousel-control-width: 15%;
$carousel-control-opacity: 0.5;
$carousel-control-hover-opacity: 0.9;
$carousel-control-transition: opacity 0.15s ease;
$carousel-indicator-width: 30px;
$carousel-indicator-height: 3px;
$carousel-indicator-hit-area-height: 10px;
$carousel-indicator-spacer: 3px;
$carousel-indicator-opacity: 0.5;
$carousel-indicator-active-bg: $white;
$carousel-indicator-active-opacity: 1;
$carousel-indicator-transition: opacity 0.6s ease;
$carousel-caption-width: 70%;
$carousel-caption-color: $white;
$carousel-caption-padding-y: 1.25rem;
$carousel-caption-spacer: 1.25rem;
$carousel-control-icon-width: 2rem;
$carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
$carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");
$carousel-transition-duration: 0.6s;
$carousel-control-prev-icon-bg: none;
$carousel-control-next-icon-bg: none;
$carousel-control-icon-font-size: 1.7rem;
$carousel-transition: transform $carousel-transition-duration ease-in-out; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
$carousel-dark-indicator-active-bg: $black;
$carousel-dark-caption-color: $black;
$carousel-dark-control-icon-filter: invert(1) grayscale(100);