Javascript Bootsrap上次转盘映像转换故障

我目前正在为自己开发一个投资组合网站。我正在基于Bootstrap的示例实现一个旋转木马。然而，第一张或第二张幻灯片到第三张幻灯片之间的过渡有点模糊，图片与下一张或上一张幻灯片重叠。顺便说一句，这在网站的移动版本中最为明显

这是网站：所以你们可以看到我指的是什么

有办法解决这个问题吗？提前谢谢

编辑：

以下是给我带来麻烦的部分：

<div class="carousel-inner">
          <div class="carousel-item active">
            <!-- <svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#777"/></svg> -->
            <img class="image-1" src="images/main-jumbotron-small.png" alt="Main Carousel">
            <div class="container">
              <div class="carousel-caption text-start">
                <h1>Hi, I'm Esteban</h1>
                <p>Engineer, leader and innovator. Click here to know more about me!</p>
                <p><a class="btn btn-lg btn-primary" href="about.html">About Me</a></p>
              </div>
            </div>
          </div>
          <div class="carousel-item">
            <img class="image-2" src="images/carousel2.jpg"  class="cover" alt="Carousel 2">
            <div class="container">
              <div class="carousel-caption">
                <h1>Deep Learning and Cancer</h1>
                <p>One of my current research projects. Check it out!</p>
                <p><a class="btn btn-lg btn-primary" href="#">Learn more</a></p>
              </div>
            </div>
          </div>
          <div class="carousel-item">
            <img class="image-3" src="images/carousel3.jpg"  class="cover" alt="Carousel 3">
            <div class="container">
              <div class="carousel-caption text-end">
                <h1>Want to know more about my work?</h1>
                <p>Go ahead and click here to check my experience.</p>
                <p><a class="btn btn-lg btn-primary" href="#">My Experience</a></p>
              </div>
            </div>
          </div>
</div>

嗨，我是埃斯特班
工程师、领导者和创新者。点击这里了解更多关于我的信息


深度学习与癌症
我目前的一个研究项目。看看


想知道更多关于我的工作吗？
请点击这里查看我的经验

---

正如我所说的，我唯一面临这个问题的旋转木马幻灯片是最后一个（last.carousel项）。除了幻灯片中图片的不透明度外，我没有真正修改旋转木马引导文件附带的CSS。

我只是在控制台上检查了你的网站后，对其进行了测试，结果显示：

Failed to load resource: net::ERR_SSL_PROTOCOL_ERROR ...images/main-jumbotron-small.png

试试这个：

<img class="image-1" src="/images/main-jumbotron-small.png" alt="Main Carousel">

---

将“

/

”添加到所有图像链接中，即：

/images/main jumbotron small.png

在控制台上查看后，我刚刚对您的站点进行了测试，显示：

Failed to load resource: net::ERR_SSL_PROTOCOL_ERROR ...images/main-jumbotron-small.png

试试这个：

<img class="image-1" src="/images/main-jumbotron-small.png" alt="Main Carousel">

---

将“

/

”添加到所有图像链接中，即：

/images/main jumbotron small.png

将最小宽度更改为宽度，它将解决此问题：

.carousel item>img{
对象匹配：覆盖；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
高度：50vh；
}

将min width更改为width，应该可以解决以下问题：

.carousel item>img{
对象匹配：覆盖；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
高度：50vh；
}

您能分享代码部分中让您不及格的代码吗？我已经更新了问题。非常感谢。你能分享你不及格的代码部分的代码吗？我已经更新了这个问题。非常感谢。在第一条斜线前用两个点可以吗？如：../imagesDots在这里表示父文件夹，因此两个点，即位于图像上方的两个文件夹。可以在第一条斜线之前使用两个点吗？如：../imagesDots此处表示父文件夹，因此有两个点，即位于图像上方的两个文件夹。