如何为Bootstrap 5轮播图添加淡入淡出过渡效果？

架构老林

2026-7-3

解决Bootstrap 5轮播淡入淡出过渡及图片尺寸跳转问题

我正在使用Bootstrap 5的轮播组件，想要实现点击「下一页/上一页」箭头时，轮播图先缓慢淡出，再淡入显示下一张图片的效果。但目前轮播里的图片尺寸不同，切换时会出现快速跳转的问题，视觉体验很差。以下是我原来的代码：

原HTML代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Testing</title>    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">    <link rel="stylesheet" href="testing.css">    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">    <script defer src="testing.js"></script></head><body style="max-width: 100%; overflow-x:hidden; background-color:black;">    <div class="container-lg">        <div class="row justify-content-center text-center align-items-center">                       <div class="col-4">                <div id="myCarousel" class="carousel slide carousel-fade">                    <div class="carousel-inner">                        <div class="carousel-item active img-fluid">                            <img src = "image1.jpg" class = "img-fluid">                        </div>                        <div class="carousel-item img-fluid">                            <img src = "image2.jpg" class = "img-fluid">                        </div>                    </div>                 </div>                <button class="carousel-control-prev" onclick="nextSlide()" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>                    <span class="visually-hidden">Previous</span>                </button>                <button class="carousel-control-next" onclick="nextSlide()" type="button" data-bs-target="#myCarousel" data-bs-slide="next">                    <span class="carousel-control-next-icon" aria-hidden="true"></span>                    <span class="visually-hidden">Next</span>                </button>            </div>        </div>    </div>    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script></body></html>

原CSS代码

.carousel-item {    width: 100%;    height: 100%;    overflow: hidden;}.fadeIn {    visibility: visible;    opacity: 1;    transition: opacity 2s linear;}.fadeOut {visibility: hidden;opacity: 0;transition: visibility 0s 2s, opacity 2s linear;}

原JS代码

function nextSlide() {    const carousel = document.getElementById('myCarousel');    const activeItem = carousel.querySelector('.carousel-item.active');    const nextItem = activeItem.nextElementSibling || carousel.querySelector('.carousel-item:first-child');    setTimeout(() => {      activeItem.classList.remove('active');      activeItem.classList.add("fadeOut");      activeItem.classList.remove("fadeIn");      nextItem.classList.add('active');      nextItem.classList.remove("fadeOut");      nextItem.classList.add("fadeIn")    }, 3000);}

修正方案

Bootstrap 5自带carousel-fade类可实现淡入淡出，只需调整样式解决图片尺寸跳转问题，无需自定义复杂JS逻辑，直接利用原生轮播控制即可。

修改后的HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Testing</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <link rel="stylesheet" href="testing.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">
</head>
<body style="max-width: 100%; overflow-x:hidden; background-color:black;">
    <div class="container-lg">
        <div class="row justify-content-center text-center align-items-center">
            <div class="col-4">
                <div id="myCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel">
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img src="image1.jpg" class="d-block w-100 carousel-img">
                        </div>
                        <div class="carousel-item">
                            <img src="image2.jpg" class="d-block w-100 carousel-img">
                        </div>
                    </div>
                    <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Previous</span>
                    </button>
                    <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Next</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>

修改后的CSS代码

/* 固定轮播容器高度，避免尺寸跳转 */
.carousel-inner {
    height: 400px; /* 根据需求自定义高度 */
}

/* 统一图片显示样式，保持视觉一致 */
.carousel-img {
    height: 100%;
    object-fit: cover; /* 保持图片比例，裁剪多余部分；若要完整显示图片，改用object-fit: contain */
}

/* 自定义淡入淡出过渡时长，覆盖Bootstrap默认值 */
.carousel-fade .carousel-item {
    transition-duration: 2s; /* 调整过渡速度 */
    opacity: 0;
}

.carousel-fade .carousel-item.active {
    opacity: 1;
}

.carousel-fade .carousel-item.active.carousel-item-start,
.carousel-fade .carousel-item.active.carousel-item-end {
    opacity: 0;
}

.carousel-fade .carousel-item-next.carousel-item-start,
.carousel-fade .carousel-item-prev.carousel-item-end {
    opacity: 1;
}

关键修改说明

移除自定义nextSlide函数，直接使用Bootstrap原生控制按钮，避免手动操作类名引发的冲突
给轮播容器设置固定高度，彻底解决不同尺寸图片切换时的跳转问题
用object-fit属性统一图片显示方式，保证视觉一致性
自定义carousel-fade过渡时长，实现缓慢淡入淡出效果
移除多余的img-fluid类，改用d-block w-100确保图片占满容器

内容的提问来源于stack exchange，提问作者Gooey

如何为Bootstrap 5轮播图添加淡入淡出过渡效果？

原HTML代码 #

原CSS代码 #

原JS代码 #

修正方案 #