0

I need to generate a list with images from a given folder in my HTML via Javascript.

Okay, I did that, but after searching dozens of similar codes, I realized that it can only add images with sequential names (for example, 01.jpg, 02.jpg, 03.jpg ...) and I need to load all the images without specifying the names, so that I don't have to rename them.

This is my code:

for (i = 01; i <= 09; i++) {
document.write('<li class="slider"><img src="https://jar.is/cdn/img/0'+i+'.jpg" alt="'+i+'" title="'+i+'" /></li>');
}
.slider {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-flow: row wrap;
    margin: 3px;
    align-items: center;
    justify-content: center;
}
.slider img {
  max-width: 450px;
  width: 270px;
  height: 210px;
  object-fit: cover;
  border-radius: 6px;
}
<ul class="slider"></ul>

Is there a way to load ALL THE IMAGES (*.jpg) in my HTML list?

Thanks a lot.

Jaris GV
  • 1

1 Answers1

1

If it's not a Server side JavaScript, there is no simple way to get the complete folder contents from the client side. You would need to send the file list from your backend or get it by AJAX via some kind of API.

See Get list of filenames in folder with Javascript for more inspiration.

j0ste
  • 379
  • 1
  • 7