update qualitatives and images

index.html

@@ -25,6 +25,60 @@
   <script src="./static/js/bulma-carousel.min.js"></script>
   <script src="./static/js/bulma-slider.min.js"></script>
   <script src="./static/js/index.js"></script>
+  <style>
+    .carousel {
+      display: flex;
+      overflow: hidden;
+      position: relative;
+      width: 80%; 
+      height: 50%;
+      /* center this carousel */
+      margin: 0 auto;
+    }
+
+    .carousel .item {
+      flex: 0 0 25%; /* Display 4 items at once */
+      transition: transform 0.5s ease;
+      overflow: hidden;
+      display: contents;
+      align-items: center;
+      justify-content: center;
+      height: 100%; /* Ensure items take the full height of the carousel */
+    }
+
+    .carousel img {
+      max-width: 100%;
+      max-height: 100%;
+      height: 100%; /* Adjust the height to match the container */
+      width: auto;
+      object-fit: contain; /* Ensure the entire image is visible within the container */
+    }
+
+    .carousel-buttons {
+      position: absolute;
+      top: 50%;
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      transform: translateY(-50%);
+    }
+
+    .carousel-buttons button {
+      background: rgba(255, 255, 255, 0.8);
+      border: none;
+      font-size: 2rem;
+      cursor: pointer;
+    }
+
+    .slider .slider-navigation-next {
+      display: none;
+    }
+
+    .slider .slider-navigation-previous {
+      display: none;
+    }
+
+    </style>
 </head>
 
 
@@ -60,7 +114,7 @@ <h1 class="title is-4" style="color: #5c5c5c;">ECCV 2024</h1>
           <div class="is-size-5 publication-authors">
             <span class="author-block"><sup>1</sup>University of Modena and Reggio Emilia,</span>
             <span class="author-block"><sup>2</sup>University of Pisa,</span>
-            <span class="author-block"><sup>3</sup>IIT-CNR, Italy,</span>
+            <span class="author-block"><sup>3</sup>IIT-CNR, Italy</span>
           </div>
           <div class="is-size-5 publication-authors">
             <span class="author-block">* Equal contribution</span>
@@ -144,32 +198,33 @@ <h2 class="subtitle has-text-centered">
   </div>
 </section>
 
+
 <section class="hero is-light is-small">
   <div class="hero-body">
     <div class="container">
       <div id="results-carousel" class="carousel results-carousel">
         <div class="item item-steve">
-          <img poster="" src="https://aimagelab.ing.unimore.it/imagelab/uploadedImages/001088.png" id="steve" autoplay controls muted loop playsinline height="100%">
+          <img src="static/images/Picture2.png" id="steve" height="100%">
         </div>
         <div class="item item-chair-tp">
-          <img poster="" src="https://aimagelab.ing.unimore.it/imagelab/uploadedImages/001090.png" id="steve" autoplay controls muted loop playsinline height="100%">
+          <img src="static/images/Picture3.png" id="chair-tp" height="100%">
         </div>
         <div class="item item-shiba">
-          <img poster="" src="https://aimagelab.ing.unimore.it/imagelab/uploadedImages/001091.png" id="steve" autoplay controls muted loop playsinline height="100%">
+          <img src="static/images/Picture1.png" id="shiba" height="100%">
         </div>
         <div class="item item-fullbody">
-          <img poster="" src="https://aimagelab.ing.unimore.it/imagelab/uploadedImages/001092.png" id="steve" autoplay controls muted loop playsinline height="100%">
+          <img src="static/images/Picture4.png" id="fullbody" height="100%">
         </div>
         <div class="item item-blueshirt">
-          <img poster="" src="https://aimagelab.ing.unimore.it/imagelab/uploadedImages/001093.png" id="steve" autoplay controls muted loop playsinline height="100%">
+          <img src="static/images/Picture5.png" id="blueshirt" height="100%">
         </div>
         <div class="item item-mask">
-          <img poster="" src="https://aimagelab.ing.unimore.it/imagelab/uploadedImages/001094.png" id="steve" autoplay controls muted loop playsinline height="100%">
-        </div>
-        <div class="item item-coffee">
-          <img poster="" src="https://aimagelab.ing.unimore.it/imagelab/uploadedImages/001095.png" id="steve" autoplay controls muted loop playsinline height="100%">
+          <img src="static/images/Picture6.png" id="mask" height="100%">
         </div>
       </div>
+      <!-- Use existing buttons -->
+      <button class="slider-navigation-previous" id="prev-button">&#10094;</button>
+      <button class="slider-navigation-next" id="next-button">&#10095;</button>
     </div>
   </div>
 </section>
@@ -350,5 +405,38 @@ <h2 class="title">Citation</h2>
   </div>
 </footer>
 
+<script>
+  document.addEventListener('DOMContentLoaded', function () {
+    const carousels = bulmaCarousel.attach('#results-carousel', {
+      slidesToScroll: 1,
+      slidesToShow: 5,
+      infinite: true,
+    });
+
+    carousels.forEach(carousel => {
+      document.getElementById('prev-button').addEventListener('click', function () {
+        carousel.previous();
+      });
+
+
+      document.getElementById('next-button').addEventListener('click', function () {
+        carousel.next();
+      });
+
+      function autoPlayCarousel() {
+        setInterval(() => {
+          carousel.next();
+        }, 3000); // Change image every 3 seconds
+      }
+
+      autoPlayCarousel();
+    });
+  });
+</script>
+
+<!-- Include the Bulma Carousel JS file -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/bulma-carousel/4.0.3/js/bulma-carousel.min.js"></script>
+
+
 </body>
 </html>