Bootstrap 4 carousel-fade not working properly - html

Question

I'm having some issues with bootstrap's carousel, I have some images with different resolutions and ratios, and when I use the carousel-fade effect and two images with different ratios are next to each other the animation comes out janky.
I was wondering if there was a way to alleviate or solve this problem entirely
<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>
demo:
https://jsfiddle.net/02fxt9de/2/

Answer 1

The main issue here is your image resolution
if they are different it is obvious that the slide transition would appear janky . This can be solved by
setting resolution of image as equal
just replace this section in your code and try out
<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 code
.carousel-img-size {height:200px ; width:400px;}
change width and height as per your requirement. :)