Hello! I’m working on a project where I need to horizontally scroll images within multiple divs throughout a webpage. (Kind of like the Netflix design, for those who know what I’m talking about. 
) I’m relatively new to JavaScript (or even jQuery) and have been looking online for resource codes but have come up short. Most scrollers seen were only used for one DIV not the others needed.
I’ve noticed that nesting a div within a div is how most codes have tried the technique but the JavaScript is what has stumped me. However, I recently came across a small snippet of code online which would seem to work but doesn’t. I feel it has something to do with using an unordered list and CSS to figure out what’s wrong but have come up short! It does seem to work when a single large image is in it though? If an extra pair of eyes can help diagnose the problem, that would be helpful!
In short, this is how the code looks:
<html>
<body>
<script type="text/javascript">
var timer1;
function scrollDiv(divId, depl) {
var scroll_container = document.getElementById(divId);
scroll_container.scrollLeft -= depl;
timer1 = setTimeout('scrollDiv("'+divId+'", '+depl+')', 10);
}
</script>
<div style="float:left; width: 30px">
<input type="button" value="«" style="height: 200px" onmousedown="scrollDiv('MyDiv', 3)" onmouseup="clearTimeout(timer1)" />
</div>
<div id="MyDiv" style="float: left; width: 200px; height: 200px; border: 1px solid; overflow: hidden;">
<img src="picture2.jpg" alt="image large" style="height: 200px; float: left;" />
<img src="picture2.jpg" alt="image large" style="height: 200px; float: left;" />
</div>
<div style="float:left; width: 30px">
<input type="button" value="»" style="height: 200px" onmousedown="scrollDiv('MyDiv', -3)" onmouseup="clearTimeout(timer1)" />
</div>
<br style="clear:both" />
<div style="float:left; width: 30px">
<input type="button" value="«" style="height: 200px" onmousedown="scrollDiv('MyDiv', 3)" onmouseup="clearTimeout(timer1)" />
</div>
<div id="MyDiv" style="float: left; width: 200px; height: 200px; border: 1px solid; overflow: hidden;">
<img src="picture2.jpg" alt="image large" style="height: 200px; float: left;" />
<img src="picture2.jpg" alt="image large" style="height: 200px; float: left;" />
</div>
<div style="float:left; width: 30px">
<input type="button" value="»" style="height: 200px" onmousedown="scrollDiv('MyDiv', -3)" onmouseup="clearTimeout(timer1)" />
</div>
</body>
</html>
P.S. I will change it to using an external CSS file get rid of the redundant code! And use an image instead of the “button” input as the navigating object. This is the code that was taken from a guide site!