I have a few javascript in my code which help with image slider, I also have an external file I connected to the HTML file which helps with scrolling up. It's all on the front-end, do I need to specifically get Javascript hosting?
let calcScrollValue = () => { let scrollProgress = document.getElementById("progress"); let progressValue = document.getElementById("progress-value"); let pos = document.documentElement.scrollTop; let calcHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight; let scrollValue = Math.round((pos * 100) / calcHeight); if (pos > 100) { scrollProgress.style.display = "grid"; } else { scrollProgress.style.display = "none"; } scrollProgress.addEventListener("click", () => { document.documentElement.scrollTop = 0; }); scrollProgress.style.background = `conic-gradient(#03cc65 ${scrollValue}%, #d7d7d7 ${scrollValue}%)`; };
window.onscroll = calcScrollValue; window.onload = calcScrollValue;
<div class="slider"> <div class="slides"> <!--radio buttons start--> <input type="radio" name="radio-btn" id="radio1"> <input type="radio" name="radio-btn" id="radio2"> <input type="radio" name="radio-btn" id="radio3"> <input type="radio" name="radio-btn" id="radio4"> <!--radio buttons end--> <!--slide images start--> <div class="slide first"> <img src="Ac slide(4).png" alt=""> </div> <div class="slide"> <img src="Ac slide (2).png" alt=""> </div> <div class="slide"> <img src="a14 (2).png" alt=""> </div> <div class="slide"> <img src="RIANS.png" alt=""> </div> <!--slide images end--> <!--automatic navigation start--> <div class="navigation-auto"> <div class="auto-btn1"></div> <div class="auto-btn2"></div> <div class="auto-btn3"></div> <div class="auto-btn4"></div> </div> <!--automatic navigation end--> </div> <!--manual navigation start--> <div class="navigation-manual"> <label for="radio1" class="manual-btn"></label> <label for="radio2" class="manual-btn"></label> <label for="radio3" class="manual-btn"></label> <label for="radio4" class="manual-btn"></label> </div> <!--manual navigation end--> </div> <!--image slider end--> 