I need help with creating a slider using JavaScript. The code I have written below calculates the widths of the slides, but it's throwing an error in the console. Can someone advise on how to properly loop through and assign width to these elements?
Javascript
var calcSlideWidth = function(divId){
let slDiv = document.getElementById(divId);
let slides = slDiv.getElementsByClassName('slide');
slDiv.style.width = 100 * slides.length + "%";
slideWidth = 100 / slides.length;
for (let i = 0; i < slides.length; i++){
slides[i].style.width = slideWidth + "%";
console.log(i);
}
}
window.onload = function(){
calcSlideWidth("slider");
}
HTML
<div class="slider-container">
<ul id="slider">
<li class="slide"><span>Slide 1</span></li>
<li class="slide"><span>Slide 2</span></li>
<li class="slide"><span>Slide 3</span></li>
</ul>
</div>