I am looking to create an automatic image scrolling feature on my webpage using a bunch of images I have. I have searched for a solution but have not found one that fits my requirements. I don't think a carousel is the right approach for this. The solution might involve Jquery or JavaScript, but I am not certain.
The layout:
If I have 10 or more images, how can I include them in a row that will scroll on the screen?
The HTML for the image gallery:
<div style="background-color: #54c545;">
<div class="container">
<!-- Grid row-->
<div class="row py-4 d-flex align-items-center">
<div class="container">
<h2>Image Gallery</h2>
<div class="row">
<div class="col-md-2">
<div class="thumbnail">
<img src="img/holoContin.png" alt="Lights" style="width:100%">
</div>
</div>
<!-- end col -->
<div class="col-md-2">
<div class="thumbnail">
<img src="img/holoAns.png" alt="Nature" style="width:100%">
</div>
</div>
<!-- end col -->
<div class="col-md-2">
<div class="thumbnail">
<img src="img/holoAns.png" alt="Nature" style="width:100%">
</div>
</div>
<!-- end col -->
<div class="col-md-2">
<div class="thumbnail">
<img src="img/holoAns.png" alt="Nature" style="width:100%">
</div>
</div>
<!-- end col -->
<div class="col-md-2">
<div class="thumbnail">
<img src="img/holoAns.png" alt="Nature" style="width:100%">
</div>
</div>
<!-- end col -->
<div class="col-md-2">
<div class="thumbnail">
<img src="img/holoAns.png" alt="Nature" style="width:100%">
</div>
</div>
<!-- end col -->
</div>
</div>
</div>
<!-- Grid row-->
</div>
<!-- end img gallery container -->
</div>