Js .classList.add() is not working properly

I’m in a procces of creaing simple movie site. cruntly working there home page. in the home page there is a carosol.

in CSS I hidden the visibility of all slide. what I’m going do is in JS creat a array for all silds and switch between silds when I clicked the arrow icon.

as a first stem I want to active 1st slide when we load the web. so I used .classList.add() property to active 1st element of the array. but it’s not work propaly.

please help to short this out.

let left=document.querySelector('.left');
let right=document.querySelector('.right');

let av2012 = document.querySelectorAll('.Av2012');
let av2015 = document.querySelectorAll('.Av2015');
let av2018 = document.querySelectorAll('.Av2018');
let av2019 = document.querySelectorAll('.Av2019');

let slides=[av2012,av2015,av2018,av2019];

let index=0;

let active= slides[index].classList.add('active');

body{
    font-family: 'Roboto', sans-serif;
    margin: 20px 40px 0 40px;   
}

.head{
    display: flex;
    justify-content: space-between;
}

ul{
    list-style: none;
    display: flex;
    gap: 100px;  
}

#searchBar{
    width: 600px;
    height: 50px;
    border-radius: 17px;   
}

input{
    font-size: 1.5em;
    position: relative;
    left:20px;   
}
button{
border: none;
background-color: transparent;
position: relative;
left:-50px;
top: 5px;
z-index: 10; 
cursor: pointer;
}

.arrow{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100vh;
}

.left, .right{
    cursor: pointer;
    z-index: 10;
}

.right{
    transform: rotatey(180deg);
}
.movies{
    display: flex;
    justify-content: space-evenly;
    top:-550px;
    position: relative;
       
}

.active{
    visibility: visible;
}

.deactive{
    visibility: hidden;
}

.Av2012, .Av2015, .Av2018, .Av2019{
    width: 800px;
    display: flex;
    align-items: center;
    gap: 30px;
    position: absolute;
    visibility: hidden; 
}

h2, h3{
    margin-top: 0;
    margin-bottom: 0;
}

.about{margin-top: 20px;}

<body>
<div class="head">
    <div class="logo">
        <img src="Assetslogo.png" alt="website logo" width="60px" height="60px">
    </div>
    <div class="searchBar">
        <form action="search">
            <input type="text" placeholder="Find HD Movies and TV show" name="seach" id="searchBar">
            <button> <img src="Assetssearch icon.svg" alt="searchIcon">
            </button>
        </form>
    </div>
    <div class="navigation">
        <ul>
            <li>Genre</li>
            <li>Year</li>
            <li>Rating</li>
        </ul>
    </div>
</div>
<div class="arrow">
    <div class="left">
        <img src="Assetsleft arrow.svg" alt="go left side">
    </div>
    <div class="right">
        <img src="Assetsleft arrow.svg" alt="go right side">
    </div>
</div>
<div class="movies">
    <div class="Av2012">
        <div class="poster"><img src="AssetsThe Avengers 2012.jpg" alt="avengers 2012 movie poster" width="240px" height="400px"></div>
        <div class="discripction">
        <div class="title"><h2>The Avengers 2012 </h2></div>
        <div class="rating"><h3>8/10 IMDb</h3></div>
        <div class="about">Nick Fury is compelled to launch the Avengers Initiative when Loki poses a threat to planet Earth. His squad of superheroes put their minds together to accomplish the task.</div>
    </div>
</div>
<div class="Av2015">
    <div class="poster"><img src="AssetsThe Avengers 2015.jpg" alt="avengers 2015 movie poster" width="240px" height="400px"></div>
    <div class="discripction">
    <div class="title"><h2>Avengers: Age of Ultron 2015 </h2></div>
    <div class="rating"><h3>7.3/10 IMDb</h3></div>
    <div class="about">Tony Stark builds an artificial intelligence system named Ultron with the help of Bruce Banner. When the sentient Ultron makes plans to wipe out the human race, the Avengers set out to stop him.</div>
</div>
</div>
<div class="Av2018">
    <div class="poster"><img src="AssetsThe Avengers 2018.jpg" alt="avengers 2018 movie poster" width="240px" height="400px"></div>
    <div class="discripction">
    <div class="title"><h2>Avengers: Infinity War 2018 </h2></div>
    <div class="rating"><h3>8.4/10 IMDb</h3></div>
    <div class="about">The Avengers must stop Thanos, an intergalactic warlord, from getting his hands on all the infinity stones. However, Thanos is prepared to go to any lengths to carry out his insane plan.</div>
</div>
</div>
<div class="Av2019">
    <div class="poster"><img src="AssetsThe Avengers 2015.jpg" alt="avengers 2019 movie poster" width="240px" height="400px"></div>
    <div class="discripction">
    <div class="title"><h2>Avengers: Endgame 2019</h2></div>
    <div class="rating"><h3>8.4/10 IMDb</h3></div>
    <div class="about">After Thanos, an intergalactic warlord, disintegrates half of the universe, the Avengers must reunite and assemble again to reinvigorate their trounced allies and restore balance.</div>
</div>
</div>
</div>   
    <script src="script.js"></script>
</body>

Answer

Try this

let slides = [...av2012,...av2015,...av2018,...av2019];

This (…) is called spread operator it gives you the elements of an array

Advertisement

Answer