javascript轮播不显示第一张幻灯片

Question

所以我从 w3schools 中取出这段代码，尝试学习如何从头开始构建轮播，并将 IT 调整到我自己的项目中，但我遇到了一个问题，它在页面加载时默认不会显示第一张幻灯片。旋转木马工作正常，否则一旦你点击球（点？）来控制它。

默认幻灯片不显示

这是 html、css 和 javascript 代码..

let slideInd = 1;
showSlides(slideInd);

function showSlides(input){
    let slides = document.getElementsByClassName("slides");
    let balls = document.getElementsByClassName("balls");

    if (input > slides.length) {slideInd = 1}

    if (input < 1 ) {slideInd = slides.length}

    for (let i=0; i < slides.length; i++){
        slides[i].style.display = "none";
    }

    for (i=0; i < balls.length; i++){
        balls[i].className = balls[i].className.replace(" active","");
    }

    slides[slideInd-1].style.display = "block";
    balls[slideInd-1].className += " active";
} 

function currentSlide(input) {
    showSlides(slideInd = input);
  }

.sw-containter{
    max-width: 1560px;
    position: relative;
    margin: auto;
}
.slides{
    display: none;
}

.slides img{
    max-width: 1535px;
    vertical-align: middle;
}

.text{
    background-color: #000000;
    color: white;
    font-family: 'Source Code Pro', monospace;
    font-weight: 400;
    text-align: center;
    
    position: absolute;
    width: 1535px;
}
.balls{
    cursor: pointer;
    display: inline-block;
    position: relative;
    

    height: 10px;
    width: 10px;
    margin: 45px 3px;

    background-color: #000000;
    border-radius: 50%;
    transition: background-color 0.6s ease;
}

.active, .balls:hover{
    background-color: #D9D9D9;
}

.fade{
    animation-name: fade;
    animation-duration: 1s;
}

@keyframes fade{
    from{opacity: .4;}
    to {opacity: 1;}
}

    <div class="sw-container">
        <div class="slides fade">
            <img src="/assets/imgs/fifa23.jpg" style="width:100%;">
            <div class="text">Released on September 30th! Buy now!</div>
        </div>

        <div class="slides fade">
            <img src="/assets/imgs/starocean23.webp" style="width:100%">
            <div class="text">Releases on Octber 27th. Preorder Now!</div>
        </div>

        <div class="slides fade">
            <img src="/assets/imgs/GOWcontroller.jpg" style="width:100%">
            <div class="text">Preorders live now!</div>
        </div>

        <div class="slides fade">
            <img src="/assets/imgs/gothamKnights23.jpg" style="width:100%">
            <div class="text">Releases on October 21st!</div>
        </div>

        <div class="slides fade">
            <img src="/assets/imgs/plagueTale23.jpg" style="width:100%">
            <div class="text">Releases on October 18th!</div>
        </div>
    </div>

    <!--slider balls-->
    <div  style="text-align:center;">
        <span class="balls" onclick="currentSlide(1)"></span>
        <span class="balls" onclick="currentSlide(2)"></span>
        <span class="balls" onclick="currentSlide(3)"></span>
        <span class="balls" onclick="currentSlide(4)"></span>
        <span class="balls" onclick="currentSlide(5)"></span>
    </div>

任何帮助是极大的赞赏！

注意：我有一个显示：无；CSS 中的一行意味着阻止所有幻灯片同时显示，如果我将其删除，它们会堆积在页面上，所以我认为这不是问题所在。

尝试更改循环以查看我是否输入了错误但它没有用

Answer 1

您可以添加 HTML 和 CSS 代码以及 Javascript 来为这个问题提供良好的上下文吗？