Bootstrap 4 轮播淡入淡出无法正常工作

如何解决Bootstrap 4 轮播淡入淡出无法正常工作

我在使用 bootstrap 的轮播时遇到了一些问题，我有一些分辨率和比例不同的图像，当我使用轮播淡入淡出效果并且两个不同比例的图像彼此相邻时，动画会很卡顿。

我想知道是否有办法完全缓解或解决这个问题

<div id="demo" class="carousel slide carousel-fade" data-ride="carousel" style="width: 800px;">
<ul class="carousel-indicators" id="car_ind">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
    <div class="carousel-item active">
        <img src="https://images.corsidia.com/ckeditor/pictures/data/000/000/086/content/immagini-e-tabelle-html-00.jpg" alt="Los Angeles" />
    </div>
    <div class="carousel-item">
        <img src="https://www.urbannaturale.com/wp-content/uploads/2019/06/face-800-x-533px-photo-1498842812179-c81beecf902c.jpg" alt="Chicago" />
    </div>
    <div class="carousel-item">
        <img src="https://script.meteolive.it/admin/immaginiNotizie/SRC/__130766___taal1.jpg" alt="New York" />
    </div>
</div>
<a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"> </span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"> </span>
</a>

演示： https://jsfiddle.net/02fxt9de/2/

解决方法

这里的主要问题是您的图像分辨率
如果它们不同，很明显幻灯片过渡会显得很笨拙。这可以通过以下方式解决设置图像分辨率相同

只需在您的代码中替换此部分并尝试

<div class="carousel-inner">
    <div class="carousel-item active">
        <img src="https://images.corsidia.com/ckeditor/pictures/data/000/000/086/content/immagini-e-tabelle-html-00.jpg" class="carousel-img-size" alt="Los Angeles" />
    </div>
    <div class="carousel-item">
        <img src="https://www.urbannaturale.com/wp-content/uploads/2019/06/face-800-x-533px-photo-1498842812179-c81beecf902c.jpg" class="carousel-img-size" alt="Chicago" />
    </div>
    <div class="carousel-item">
        <img src="https://script.meteolive.it/admin/immaginiNotizie/SRC/__130766___taal1.jpg" class="carousel-img-size"alt="New York" />
    </div>
</div>

CSS 代码

.carousel-img-size {height:200px ; width:400px;}

根据您的要求更改宽度和高度。 :)