Ciao a tutti! Dovrei fare uno slideshow di immagini i cui nomi sono in una lista (per esempio: im_names = ["img_fjords.jpg", "img_forest.jpg", "img_lights.jpg", "img_mountains.jpg"].

Quindi in pratica mi servirebbe un ciclo for che scorra le immagini e le visualizzi nella pagina proprio come fa questo codice. L'unica differenza è che qui ho "forzato" la visualizzazione a mano 4 volte con 4 immagini diverse, nel codice che mi serve questo viene fatto da un ciclo for.
Le immagini sono tutte nella stesa cartella, e non importa se non avete le immagini che sono scritte nel codice, come esempio un'immagine vale l'altra!

Cercando sul web ho capito che si passa per forza da javascript, però conosco html e css ma javascript ho solo qualche nozione di base quindi se potreste modificare il codice per avere lo stesso risultato visivo che ha quello che ho allegato, mi fareste davvero un grande favore

codice HTML:
<!DOCTYPE html>
<html>
<head>
<style>   
 body{        
     background: rgb(230, 230, 230);
    }

div.gallery {    
    border: 1px solid #ccc;
}
div.gallery:hover {
    border: 1px solid #777;
}
div.gallery img {
    width: 100%;
    height: auto;
}
div.desc {
    padding: 15px;
    text-align: center;
}
* {
    box-sizing: border-box;
}
.responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
}
@media only screen and (max-width: 700px){
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }}
@media only screen and (max-width: 500px){
    .responsive {
        width: 100%;
    }}
.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
    .info div{
        color: #fff;
        font-family:'Exo', sans-serif;
        font-size: 20px; 
        font-weight: 500;
    }
    .info div span{
        color: #5379fa !important;
    }
        .subdiv2{
        margin: 0 auto;
        display: table;
        height: 200px!important;
    }
    .div1{
        margin:0 auto;
        width:1400px;
        display:block;
    }
    .subdiv1{
        display: inline-flex;
        display: -webkit-inline-flex;
        width: 100%;
    }
     .invia{
        position: relative;
        top: -320px;
        left: -10px;
        height: 150px;
        width: 350px;
        padding: 10px;
        z-index: 2;
     }
    .invia input[type=button]{
        width: 160px;
        height: 35px;
        background: #597ef9;
        border: 1px silver;
        cursor: pointer;
        border-radius: 2px;
        color: #fff;
        font-family: 'Exo', sans-serif;
        font-size: 16px;
        font-weight: 400;
        padding: 6px;
        margin-top:100%;
    }

    .invia input[type=button]:hover{
    opacity: 0.8;
    }
    .invia input[type=button]:active{
        opacity: 0.6;
    }
    .invia input[type=text]:focus{
        outline: none;
        border: 1px solid rgba(255,255,255,0.9);
    }

    .invia input[type=password]:focus{
        outline: none;
        border: 1px solid rgba(255,255,255,0.9);
    }

    .invia input[type=button]:focus{
        outline: none;
    }
</style>
</head>


<body>
    <div class="div1">
        <div class="subdiv1">
                <div class="subdiv2">
                 <div class="image">
                    <img src="logo.jpg">
                </div>
            </div>
                <div class="subdiv2">
                <div class="info">
                    <div>
                        <span> Ecco i volti lego che soddisfano le tue richieste! <br> <br>1) </span>Seleziona <span> quello che corrisponde di più al volto umano visto in precedenza<br>
                        2) Clicca </span>Fatto<span> per proseguire</span>
                        <br><div class="invia";>
                    <input type="button"  value="Fatto"> 
               </div>
                    </div>
                </div>
        </div>
    </div>
</div>
<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="img_fjords.jpg">
      <img src="img_forest.jpg" alt="Forest" width="600" height="400">
    </a>    <div class="desc">Add a description of the image here</div>
</div>
</div>

<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="img_forest.jpg">
      <img src="img_forest.jpg" alt="Forest" width="600" height="400">
    </a>    <div class="desc">Add a description of the image here</div>
  </div>
</div>

<div class="responsive">  <div class="gallery">
    <a target="_blank" href="img_lights.jpg">
      <img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

<div class="responsive">  <div class="gallery">
    <a target="_blank" href="img_mountains.jpg">
      <img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
    </a> <div class="desc">Add a description of the image here</div>
  </div>
</div>

<div class="clearfix"></div>

</body>
</html>