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

Question

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 this and it's almost working fine but the display is a bit weird, the second image in the slideshow gets shown below the first image for a moment before it comes over the first image. I have attached a GIF file of the same:

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" class="thickbox"><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" class="thickbox"><img src={{  reconstructed_training_images_list[i] }} alt="Sorry, No Display!" border="0"/></a></td>
            <td><center><b>Flip-Test<b></center><div class="slideshow"><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?

Answer 1

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.

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

Question

1 answers

solution1
1 ACCPTED 2022-01-14 12:11:55

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

Question

1 answers

solution1 1 ACCPTED 2022-01-14 12:11:55

solution1
1 ACCPTED 2022-01-14 12:11:55