How do I make multiple slideshows on same page in HTML?-CodePudding

I am trying to have multiple slideshows of two images on a page; those two images are different for all rows. I have tried following multiple solutions on StackOverflow, like

Here's my code for the same:

<!doctype html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <!-- <link rel="stylesheet" href="./style.css"> -->
    <!-- icons -->
    <script src="https://kit.fontawesome.com/a7e5305de0.js" crossorigin="anonymous"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Merriweather Sans&display=swap" rel="stylesheet">  
    <!-- JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl"
        crossorigin="anonymous"></script>

    <title>Autoencoder Results</title>
    <style>
        #slideshow { 
      margin: 0px auto; 
      position: relative; 
      width: 256px; 
      height: 256px;  
       
    }
    
    #slideshow > div { 
      position: absolute; 
      top: 0px; 
      left: 0px; 
      right: 0px; 
      bottom: 0px; 
    }
    </style>
</head>



<body>
    <center><h1>Autoencoder Results</h1></center>
    
    <h2 style="margin-left: 1.5%;">Reconstructed Training Images</h2>

        {% for i in range(len(training_images_list)) %}
            <br>
            <br>
            <h3 style="margin-left: 10%;">{{ i 1 }}.</h3>
            <center><table border="1">
            <COLGROUP>
            <COL width="100"><COL width="100">
            <THEAD>
            <tr>
            <td><center><b>Input<b></center><a href={{  training_images_list[i] }} title="Input" ><img src={{  training_images_list[i] }} alt="Sorry, No Display!" border="0"/></a></td>
            <td><center><b>Reconstructed<b></center><a href={{  reconstructed_training_images_list[i] }} title="Reconstructed" ><img src={{  reconstructed_training_images_list[i] }} alt="Sorry, No Display!" border="0"/></a></td>
            <td><center><b>Flip-Test<b></center><div ><div>
                <img src={{  training_images_list[i] }}>
              </div>
              <div>
                <img src={{  reconstructed_training_images_list[i] }}>
              </div>
            </div></td>
            </tr>
            </table></center>
        {% endfor %}   

    <script>
        $.each($(".slideshow > div:not(:first-child)"), function() {
  $(this).hide();
});

setInterval(function() { 
  $.each($(".slideshow"), function() {
    $(this).children().first()
      .fadeOut(200)
      .next()
      .fadeIn(200)
      .end()
      .appendTo(this);
   });
},  1500);
    </script>
    
</body>

I've tried changing the duration and some position attributes, but none of that's correcting this behaviour, where am I going wrong exactly?

CodePudding user response：

I didn't get your problem totally but I have seen two major errors in the code.

First thing is that you have your divs with the Class of slideshow but when you are calling them in styles you are calling the id. to fix this you can just write instead of:

 <style>
    #slideshow { 
      margin: 0px auto; 
      position: relative; 
      width: 256px; 
      height: 256px;  
       
    }
    
    #slideshow > div { 
      position: absolute; 
      top: 0px; 
      left: 0px; 
      right: 0px; 
      bottom: 0px; 
    }
    </style>

You can write:

    <style>
    .slideshow { 
      margin: 0px auto; 
      position: relative; 
      width: 256px; 
      height: 256px;  
       
    }
    
    .slideshow > div { 
      position: absolute; 
      top: 0px; 
      left: 0px; 
      right: 0px; 
      bottom: 0px; 
    }
    </style>

The second thing that I have noticed is that (I might be wrong because of the ambiguity of the problem) you want your images to be on a single row. but with the js template inside your HTML body, you are creating a table for each value in the array. This is logic and I do not know exactly what you are looking for, but this hint might help you.

You can comment for any further changes.