您可以覆盖轮播类并在下一张和上一张图片上设置自己的 css
试试这个代码
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleFade" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleFade" data-slide-to="1"></li>
<li data-target="#carouselExampleFade" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(45).jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(46).jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(47).jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<style>
.carousel-control-prev-icon{width: 100px;height:250px;}
.carousel-control-next-icon{width: 100px;height:250px;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script>
var next_src = $('.carousel-inner .active').next().find('.d-block').attr('src');
var prev_src = $('.carousel-item').last().find('.d-block').attr('src');
$('.carousel-control-prev-icon').css({"background-image": "url('"+prev_src+"')"});
$('.carousel-control-next-icon').css({"background-image": "url('"+next_src+"')"});
$('#carouselExampleFade').on('slid.bs.carousel', function () {
var next_src = $('.carousel-inner .active').next().find('.d-block').attr('src');
if(next_src == undefined){
next_src = $('.carousel-item').first().find('.d-block').attr('src');
}
var prev_src = $('.carousel-inner .active').prev().find('.d-block').attr('src');
if(prev_src == undefined){
prev_src = $('.carousel-item').last().find('.d-block').attr('src');
}
$('.carousel-control-prev-icon').css({"background-image": "url('"+prev_src+"')"});
$('.carousel-control-next-icon').css({"background-image": "url('"+next_src+"')"});
})
</script>
如果您想使用背景图片作为幻灯片，请使用此 jquery 代码
var next_src = $('.carousel-inner .active').next().css('background-image').replace('url(','').replace('")','').replace('"','');
var prev_src = $('.carousel-item').last().css('background-image').replace('url(','').replace('")','').replace('"','');
$('.carousel-control-prev-icon').css({"background-image": "url('"+prev_src+"')"});
$('.carousel-control-next-icon').css({"background-image": "url('"+next_src+"')"});
$('#carouselExampleFade').on('slid.bs.carousel', function () {
var next_src = '';
if($('.carousel-inner .active').next().length > 0){
next_src = $('.carousel-inner .active').next().css('background-image').replace('url(','').replace('")','').replace('"','');
}else{
next_src = $('.carousel-item').first().css('background-image').replace('url(','').replace('")','').replace('"','');
}
var prev_src = $('.carousel-inner .active').prev().find('.d-block').attr('src');
if($('.carousel-inner .active').prev().length > 0){
prev_src = $('.carousel-inner .active').prev().css('background-image').replace('url(','').replace('")','').replace('"','');
}else{
prev_src = $('.carousel-item').last().css('background-image').replace('url(','').replace('")','').replace('"','');
}
$('.carousel-control-prev-icon').css({"background-image": "url('"+prev_src+"')"});
$('.carousel-control-next-icon').css({"background-image": "url('"+next_src+"')"});
})