引导程序4转盘渐变功能无法正常工作



我对引导程序的旋转木马有一些问题,我有一些分辨率和比例不同的图像,当我使用旋转木马渐变效果时,两个比例不同的图片挨在一起,动画就会发出刺耳的声音。

我想知道是否有一种方法可以完全缓解或解决这个问题

<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;}
根据您的要求更改宽度和高度。:(

最新更新