I made this javascript code for a simple slider that can be controlled by arrows up/down.
I'm wondering what I could have done better..
document.addEventListener('keydown', changeSlide);
var wrap = document.querySelector('#wrap');
var slides = wrap.getElementsByTagName('div');
var slidesCount = wrap.children.length-1;
var i = 0;
slides[i].classList.add('active');
document.querySelector('#current').innerHTML += i+1;
document.querySelector('#total').innerHTML += slidesCount+1;
function changeSlide(e) {
if (e.keyCode == 38) {
if(i >= slidesCount) {
i = 0;
} else(
i++
)
} else if (e.keyCode == 40) {
if(i <= 0) {
i = slidesCount;
} else (
i--
)
}
for (let index = 0; index < slidesCount+1; index++) {
slides[index].classList.remove('active');
}
slides[i].classList.add('active');
document.querySelector('#current').innerHTML = (i+1);
}
Here is event html:
<body>
<link rel = "stylesheet" href = "style.css"/>
<div id = "wrap">
<div>
<h3>Title</h3>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/19/Ryan_ten_Doeschate_ODI_batting_graph.svg/1216px-Ryan_ten_Doeschate_ODI_batting_graph.svg.png" alt="">
</div>
<div>
<h3>Title</h3>
<img src="https://pmpaspeakingofprecision.files.wordpress.com/2013/06/ismmay2013.jpg" alt="">
</div>
<div >
<h3>Title</h3>
<img src="https://www.rba.gov.au/speeches/2016/images/sp-so-2016-07-12-graph3.gif" alt="">
</div>
<div >
<h3>Title</h3>
<img src="https://www.rbnz.govt.nz/-/media/ReserveBank/Images/Key%20graphs/key-graph-mortgage-rates-since-1990.jpg?la=en&hash=B224DD2C76E0B0C2DDC85D3A7D3E9A60B7A73ACC" alt="">
</div>
<div >
<h3>Title</h3>
<img src="https://realtechwater.com/w_p/wp-content/uploads/2018/09/BOD-Graph-Website.jpg" alt="">
</div>
</div>
<div id = counter>
<span id="current"></span>
<span>of</span>
<span id="total"></span>
</div>
<script src="slider.js"></script>
</body>
And a little bit of css:
img {
display: block;
width: 100%;
}
#wrap > div {
display: none;
}
#counter {
position: absolute;
bottom: 5px;
right: 5px;
}
.active {
display: block!important;
}
For those who like codepen, here is the link.