My goal is to create a horizontal scroll menu for a series of thumbnails. I have managed to make it scroll horizontally, but the issue I'm facing is that the thumbnails stack on top of each other and continue to scroll vertically within my div. What I want instead is to have all the thumbnails in one row that scrolls horizontally when there is overflow in the 'x' direction. Additionally, I would like the height of the div to be proportional to the width of the thumbnails. Currently, setting the height to auto results in the container expanding to accommodate all 50 images in multiple rows rather than just one row. Here's the code snippet:
HTML (.ejs file):
<div class="thumbnail-container">
<ul class="thumbnail-list">
<% for (var i = 0; i < listData['photos'].length; i++) { %>
<li>
<span><img class="thumbnail-image" src="http://www.realcove.net/<%=listData['photos'][i]%>"></span>
</li>
<% } %>
</ul>
</div>
CSS:
.thumbnail-container {
overflow-x:scroll;
height: 75px;
width:100%;
padding: 0 15px;
}
.thumbnail-list {
white-space:nowrap;
}
.thumbnail-image {
display: block;
padding:2px;
max-width: 100px;
height:auto;
}
I've done some research and I feel like I'm very close to achieving the desired result. However, something seems to be missing or incorrect. Any suggestions on how to fix this issue or any errors that need to be addressed? Your assistance would be greatly appreciated. Thank you.