我正在为我们的项目网站工作，我计划使用无限自动播放滑块为“我们的团队”和图像是不工作的。唯一有效的图像是图标，它们是png格式的。我使用的图片也是png格式的，所以我真的不知道为什么我的图片不起作用。虽然滑块工作，只有图像不显示，为什么是这样的？
这是我的html代码

<!-- Our Team -->
  <div class="slider">
    <div class="slide-track">
        <div class="slide">
            <img src="img/black.jpg" height="100" width="250" alt="" />
        </div>
        <div class="slide">
            <img src="img/2.png" height="100" width="250" alt="" />
        </div>
        <div class="slide">
            <img src="img/3.png" height="100" width="250" alt="" />
        </div>
        <div class="slide">
            <img src="img/chie.png" height="100" width="250" alt="" />
        </div>
        <div class="slide">
            <img src="img/4.png" height="100" width="250" alt="" />
        </div>
    </div>
  </div>

这是我的CSS代码

/* Animation */
@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-250px * 7))}
}

/* Styling */
.slider {
    background: white;
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .125);
    height: 200px;
    margin: auto;
    overflow:hidden;
    position: relative;
    width: 960px; 
  padding-left: 5px;
}
    
.slider::before,
    .slider::after {
        content: "";
        height: 100px;
        position: absolute;
        width: 200px;
        z-index: 2;
    }
    
    .slider::after {
        right: 0;
        top: 0;
        transform: rotateZ(180deg);
    }

    .slider::before {
        left: 0;
        top: 0;
    }
    
    .slide-track {
        animation: scroll linear infinite;
    animation-duration: 40s;
        display: flex;
        width: calc(250px * 14);
    }
    
    .slide {
        height: 100px;
        width: 250px;  
   
    }

  img{
    height: 200px;
  }

我试着使用jpg，但它仍然是一样的，所以我真的不知道该怎么办，任何提示-或者你能告诉我为什么吗？然而，The