我目前正在使用 Bootstrap 5 轮播，我想添加一个过渡，当您单击“下一个”箭头时，轮播会慢慢淡出，然后淡入并显示下一张图像。我想要这个，因为我的轮播中的图像尺寸不同，所以当您单击“下一步”时，它只会快速剪切轮播，而且看起来不太好。
这是我目前拥有的：
<!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/[email protected]/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/[email protected]/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/[email protected]/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 使用
carousel-fade但是，如果您想在代码中添加额外的淡入/淡出功能，则您没有使用 bs5 轮播提供的内置事件...
您需要使用通过 bs5 carousel js 事件传递的值...
请参阅此处的文档... https://getbootstrap.com/docs/5.3/components/carousel/#events
从轮播中查看控制台记录的事件...
const myCarousel = document.getElementById('carouselExample')
myCarousel.addEventListener('slide.bs.carousel', event => {
console.clear();
console.log(event.direction, event.relatedTarget, event.from, event.to);
})<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div id="carouselExample" class="carousel slide carousel-fade">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://placehold.co/2560x720?text=Slide1" class="img-fluid">
</div>
<div class="carousel-item">
<img src="https://placehold.co/2560x720?text=Slide2" class="img-fluid">
</div>
<div class="carousel-item">
<img src="https://placehold.co/2560x720?text=Slide3" class="img-fluid">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" 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="#carouselExample" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>