second display image slider fit center

app/views/foodcourt/second_display/index.html.erb

@@ -1,4 +1,94 @@
-<div class="container-fluid" style="margin-top:-65px;">
+<style>
+  * {box-sizing: border-box;}
+  body {
+    font-family: Verdana, sans-serif;
+    overflow: hidden;
+  }
+
+  .mySlides {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    display: none;
+  }
+
+  .mySlides img {
+    width: 100%;
+    height: 100%;
+    -o-object-fit: cover;
+    object-fit: cover;
+  }
+
+  /* Slideshow container */
+  .slideshow-container {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    overflow: hidden;
+    top: 0;
+    left: 0;
+  }
+
+  /* Caption text */
+  .text {
+    color: #f2f2f2;
+    font-size: 15px;
+    padding: 8px 12px;
+    position: absolute;
+    bottom: 8px;
+    width: 100%;
+    text-align: center;
+  }
+
+  /* Number text (1/3 etc) */
+  .numbertext {
+    color: #f2f2f2;
+    font-size: 12px;
+    padding: 8px 12px;
+    position: absolute;
+    top: 0;
+  }
+
+  /* Fading animation */
+  .slide-in {
+    animation-name: slide-in;
+    animation-duration: 2s; /* Adjust the duration as per your preference */
+    animation-fill-mode: forwards;
+    display: block;
+  }
+
+  .slide-out {
+    animation-name: slide-out;
+    animation-duration: 2s; /* Adjust the duration as per your preference */
+    animation-fill-mode: forwards;
+    display: block;
+  }
+
+  @keyframes slide-in {
+    0% {
+      transform: translateX(100%);
+    }
+    100% {
+      transform: translateX(0%);
+    }
+  }
+
+  @keyframes slide-out {
+    0% {
+      transform: translateX(0%);
+    }
+    100% {
+      transform: translateX(-100%);
+    }
+  }
+
+  /* On smaller screens, decrease text size */
+  @media only screen and (max-width: 300px) {
+    .text {font-size: 11px}
+  }
+</style>
+
+<div class="container-fluid">
     <button type="button" class="hidden" id="s_reload">Reload</button>
     <div class="slider" id="second_display_slider">
     	<%= render 'slider' %>
@@ -8,13 +98,40 @@
     	<%= render 'second_display' %>
     </div>
 </div>
+
 <script type="text/javascript">
 	$(document).ready(function () {
-      //html font-size for second display till 35px!
-      // document.getElementsByTagName( "html" )[0].style[ "font-size" ] = "35px";
+    //html font-size for second display till 35px!
+    // document.getElementsByTagName( "html" )[0].style[ "font-size" ] = "35px";
 
-      $('#s_reload').on('click', function () {
-      window.location.href = '/foodcourt/second_display';
-      });
+    $('#s_reload').on('click', function () {
+    window.location.href = '/origami/second_display';
     });
+  });
+
+  showSlides("second_display_slider");
+  showSlides("second_display_items");
+
+  function showSlides(sliderId) {
+    let slider = document.getElementById(sliderId);
+    let slides = slider.getElementsByClassName("mySlides");
+
+    let slideIndex = slider.dataset.slideIndex;
+
+    slideIndex++;
+    if (!slideIndex || slideIndex >= slides.length) {
+      slideIndex = 0;
+    }
+
+    for (let i = 0; i < slides.length; i++) {
+      slides[i].className = slides[i].className.replace("slide-in", "slide-out");
+    }
+
+    console.log(slideIndex);
+    slides[slideIndex].classList.remove("slide-out");
+    slides[slideIndex].classList.add("slide-in");
+
+    slider.dataset.slideIndex = slideIndex;
+    setTimeout(showSlides, 5000, sliderId); // Change image every 5 seconds
+  }
 </script>