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 >
<div >
<img src="Assets\logo.png" alt="website logo" width="60px" height="60px">
</div>
<div >
<form action="search">
<input type="text" placeholder="Find HD Movies and TV show" name="seach" id="searchBar">
<button> <img src="Assets\search icon.svg" alt="searchIcon">
</button>
</form>
</div>
<div >
<ul>
<li>Genre</li>
<li>Year</li>
<li>Rating</li>
</ul>
</div>
</div>
<div >
<div >
<img src="Assets\left arrow.svg" alt="go left side">
</div>
<div >
<img src="Assets\left arrow.svg" alt="go right side">
</div>
</div>
<div >
<div >
<div ><img src="Assets\The Avengers 2012.jpg" alt="avengers 2012 movie poster" width="240px" height="400px"></div>
<div >
<div ><h2>The Avengers 2012 </h2></div>
<div ><h3>8/10 IMDb</h3></div>
<div >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 >
<div ><img src="Assets\The Avengers 2015.jpg" alt="avengers 2015 movie poster" width="240px" height="400px"></div>
<div >
<div ><h2>Avengers: Age of Ultron 2015 </h2></div>
<div ><h3>7.3/10 IMDb</h3></div>
<div >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 >
<div ><img src="Assets\The Avengers 2018.jpg" alt="avengers 2018 movie poster" width="240px" height="400px"></div>
<div >
<div ><h2>Avengers: Infinity War 2018 </h2></div>
<div ><h3>8.4/10 IMDb</h3></div>
<div >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 >
<div ><img src="Assets\The Avengers 2015.jpg" alt="avengers 2019 movie poster" width="240px" height="400px"></div>
<div >
<div ><h2>Avengers: Endgame 2019</h2></div>
<div ><h3>8.4/10 IMDb</h3></div>
<div >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>CodePudding user response：
Try this
let slides = [...av2012,...av2015,...av2018,...av2019];
This (...) is called spread operator it gives you the elements of an array
CodePudding user response：
In JS, querySelectorAll returns an array of results since you're searching for all occourances. All you should need to do is get index 0 of the result:
let left=document.querySelector('.left');
let right=document.querySelector('.right');
let av2012 = document.querySelectorAll('.Av2012')[0];
let av2015 = document.querySelectorAll('.Av2015')[0];
let av2018 = document.querySelectorAll('.Av2018')[0];
let av2019 = document.querySelectorAll('.Av2019')[0];
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 >
<div >
<img src="Assets\logo.png" alt="website logo" width="60px" height="60px">
</div>
<div >
<form action="search">
<input type="text" placeholder="Find HD Movies and TV show" name="seach" id="searchBar">
<button> <img src="Assets\search icon.svg" alt="searchIcon">
</button>
</form>
</div>
<div >
<ul>
<li>Genre</li>
<li>Year</li>
<li>Rating</li>
</ul>
</div>
</div>
<div >
<div >
<img src="Assets\left arrow.svg" alt="go left side">
</div>
<div >
<img src="Assets\left arrow.svg" alt="go right side">
</div>
</div>
<div >
<div >
<div ><img src="Assets\The Avengers 2012.jpg" alt="avengers 2012 movie poster" width="240px" height="400px"></div>
<div >
<div ><h2>The Avengers 2012 </h2></div>
<div ><h3>8/10 IMDb</h3></div>
<div >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 >
<div ><img src="Assets\The Avengers 2015.jpg" alt="avengers 2015 movie poster" width="240px" height="400px"></div>
<div >
<div ><h2>Avengers: Age of Ultron 2015 </h2></div>
<div ><h3>7.3/10 IMDb</h3></div>
<div >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 >
<div ><img src="Assets\The Avengers 2018.jpg" alt="avengers 2018 movie poster" width="240px" height="400px"></div>
<div >
<div ><h2>Avengers: Infinity War 2018 </h2></div>
<div ><h3>8.4/10 IMDb</h3></div>
<div >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 >
<div ><img src="Assets\The Avengers 2015.jpg" alt="avengers 2019 movie poster" width="240px" height="400px"></div>
<div >
<div ><h2>Avengers: Endgame 2019</h2></div>
<div ><h3>8.4/10 IMDb</h3></div>
<div >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>