javascript carousel not showing first slide-CodePudding

So i took this code off of w3schools to try and learn how to build a carousel from scratch and adapted IT to my own project but i've run into a problem where it won't show the first slide by default when the page loads. the carousel works fine otherwise once you click on the balls(dots?) meant to control it.

DEFAULT SLIDE NOT SHOWING

here is the html, css and javascript code..

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 >
        <div >
            <img src="/assets/imgs/fifa23.jpg" style="width:100%;">
            <div >Released on September 30th! Buy now!</div>
        </div>

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

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

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

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

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

Any help is greatly appreciated!

NOTE: i have a display: none; line in CSS meant to stop all the slides from showing up at once, if i remove it they stack up on the page so i don't think that's the problem.

Tried changing the loops to see if i had typed something wrong but it didn't work

CodePudding user response：

If you are using an external JavaScript file then you can call the function by adding event listeners in the JavaScript file.

Otherwise, you need to create tag and write the whole javascript code. Then it will work.

let slides = document.getElementsByClassName("slides");
let balls = document.getElementsByClassName("balls");

[...balls].forEach((element, index) => {
  element.addEventListener("click", () => currentSlide(index   1))
})

let slideInd = 1;

showSlides(slideInd);

function showSlides(input){
   
    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 (let 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 >
        <div >
            <img src="https://images.unsplash.com/photo-1472214103451-9374bd1c798e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cGljfGVufDB8fDB8fA==&w=1000&q=80" style="width:100%;">
            <div >Released on September 30th! Buy now!</div>
        </div>

        <div >
            <img src="https://i.pinimg.com/736x/f7/75/7d/f7757d5977c6ade5ba352ec583fe8e40.jpg" style="width:100%">
            <div >Releases on Octber 27th. Preorder Now!</div>
        </div>

        <div >
            <img src="https://images.pexels.com/photos/670720/pexels-photo-670720.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" style="width:100%">
            <div >Preorders live now!</div>
        </div>
    </div>

    <!--slider balls-->
    <div style="text-align:center;">
        <span ></span>
        <span ></span>
        <span ></span>
    </div>