Bootstrap 5 Carousel transition can be customized with the help of the SASS variables that help to set the duration of the transition. The transform transition will need to be defined first if multiple transitions are implemented. In other words, the transition can be set to a custom setting using the $carousel-transition-duration and $carousel-transition SASS variables. For this, we have to get the SASS version and change the variable’s values there.
Carousel Custom transition variables:
- $carousel-transition-duration(.6s): This variable is used to change the duration by which the transition of one slide changes to the next or previous slide.
- $carousel-transition (transform $carousel-transition-duration ease-in-out): This variable is used to change the transition effects of the carousel slides.
Steps to override SCSS of Bootstrap:
Step 1: Install Bootstrap using the following command:
npm i bootstrap
Step 2: Create your custom SCSS file and write the variable you want to override. Then include the bootstrap SCSS file using import.
$variable_to_override: value @import "../node_modules/bootstrap/scss/bootstrap.scss";
Step 3: Convert the SCSS file to CSS using a live server extension.
Step 4: Include the CSS file in your HTML file.
<link rel="stylesheet" href="style.css">
Project Structure:
Syntax:
$variable_to_override: value
Example 1: The code below demonstrated how to change and manipulate the $carousel-transition-duration and $carousel-transition variables to change the carousel’s animation. The carousel which is implemented is a carousel with slides only.
- styles.scss:
$carousel-transition-duration: 1s !default;
$carousel-transition: transform $carousel-transition-duration ease-in !default;
@import "./node_modules/bootstrap/scss/bootstrap.scss";
|
- styles.css: The above SCSS file is compiled into this CSS file (only the changes shown). This file is used in the below “index.html” file.
.carousel-item { /*Other properties*/
transition: transform 1s ease-in;
} |
- index.html:
<!doctype html> <html lang="en">
<head>
<link href=
rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<script src=
</script>
</head>
<body>
<h1 class="m-4 text-success">
GeeksforGeeks
</h1>
<h4 class="ms-4">
Bootstrap 5 Carousel Custom transition
</h4>
<div class="container mb-4 p-4">
<div id="carouselExample" class="carousel slide" data-bs-ride="carousel" data-bs-pause="hover">
<div class="carousel-inner text-light text-center">
<div class="carousel-item bg-dark active" data-bs-interval="2000">
<h1 class="m-4 text-success">
This is the first slide
</h1>
<h4 class="m-4">
This slide has a time delay of 2000ms
</h4>
</div>
<div class="carousel-item bg-dark" data-bs-interval="4000">
<h1 class="m-4 text-danger">
This is the second slide
</h1>
<h4 class="m-4">
This slide has a time delay of 4000ms
</h4>
</div>
<div class="carousel-item bg-dark" data-bs-interval="6000">
<h1 class="m-4 text-warning">
This is the third slide
</h1>
<h4 class="m-4">
This slide has a time delay of 6000ms
</h4>
</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
Example 2: The code below demonstrated how to reduce the $carousel-transition-duration and change $carousel-transition variables to change the carousel’s animation. The carousel which is implemented is a carousel with text and images and has a carousel-fade class which adds a fading transformation.
- styles.scss:
$carousel-transition-duration: 0.3s !default;
$carousel-transition: transform $carousel-transition-duration ease-out !default;
@import "./node_modules/bootstrap/scss/bootstrap.scss";
|
- styles.css: The above SCSS file is compiled into this CSS file (only the changes shown). This file is included in the below “index.html” file.
.carousel-item { /* Other Properties */
transition: transform 0.3s ease-out;
} |
- index.html:
<!doctype html> <html lang="en">
<head>
<link href=
rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<script src=
</script>
</head>
<body>
<h1 class="m-4 text-success">
GeeksforGeeks
</h1>
<h4 class="ms-4">
Bootstrap 5 Carousel Custom transition
</h4>
<div class="container mb-4 p-4
text-light text-center">
<div id="carouselExample2" class="carousel slide carousel-fade" data-bs-ride="false"
data-bs-touch="true">
<div class="carousel-inner">
<div class="carousel-item bg-dark active pb-4">
<h1 class="m-4 text-success">
This is the first slide
</h1>
<img src=
width="25%" alt="GFG LOGO">
</div>
<div class="carousel-item bg-dark pb-4">
<h1 class="m-4 text-warning text-center">
This is the second slide
</h1>
<div class="text-center">
<img src=
width="25%" alt="GFG LOGO">
</div>
</div>
<div class="carousel-item bg-dark pb-4">
<h1 class="m-4 text-warning">
This is the third slide
</h1>
<div class="text-center">
<img src=
width="25%" alt="GFG LOGO">
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample2" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
<span class="visually-hidden">
Previous
</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExample2" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
<span class="visually-hidden">
Next
</span>
</button>
</div>
</div>
</body>
</html>
|
Output:
Reference: https://getbootstrap.com/docs/5.0/components/carousel/#custom-transition