Skip to content
Advertisement

javascript carousel not showing first slide

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

1

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 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>

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

Advertisement

Answer

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 class="sw-container">
        <div class="slides fade">
            <img src="https://images.unsplash.com/photo-1472214103451-9374bd1c798e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cGljfGVufDB8fDB8fA%3D%3D&w=1000&q=80" style="width:100%;">
            <div class="text">Released on September 30th! Buy now!</div>
        </div>

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

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

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