Currently, I have a navigation bar set up as an unordered list (<ul>), but some list items are not visible. I want to implement functionality where clicking arrows will move the elements left or right by hiding or showing the leftmost or rightmost items respectively.
The HTML Structure
<div id="linkbar">
<a href="#linkbar" onclick="moveleft();"><img src="./img/arrowleft.png"></a>
<div id="linkbarinternal">
<ul id="linkbaritems">
<li><a><img src="./img/banner01.jpg"></a></li>
<li><a><img src="./img/banner02.jpg"></a></li>
<li><a><img src="./img/banner03.jpg"></a></li>
<li><a><img src="./img/banner04.jpg"></a></li>
<li><a><img src="./img/banner05.jpg"></a></li>
<li><a><img src="./img/banner06.jpg"></a></li>
<li><a><img src="./img/banner07.jpg"></a></li>
<li><a><img src="./img/banner08.jpg"></a></li>
</ul>
</div>
<a href="#linkbar" onclick="moveright();"><img src="./img/arrowright.png"></a>
</div>
Previous Attempt
var linkbarcounter = 0;
function moveleft() {
document.getElementById("linkbaritems").children[linkbarcounter++].style.display="none";
}
function moveright() {
document.getElementById("linkbaritems").children[--linkbarcounter].style.display="inline";
}