v1.0 RUM-Slides

tinyplayerss · Dec 8, 2023 · b082e7b · b082e7b
1 parent b3b7773
commit b082e7b
Showing 1 changed file with 134 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,134 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
+    />
+    <style>
+      body {
+        background-color: #2c3e50;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100vh;
+        margin: 0;
+      }
+
+      #imageCard {
+        width: 400px;
+        background-color: #061726;
+        border-radius: 10px;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        overflow: hidden;
+      }
+
+      #imageContainer {
+        position: relative;
+        overflow: hidden;
+        border-radius: 0px;
+      }
+
+      #imageSlider {
+        width: 100%;
+        transition: transform 0.5s ease-in-out;
+        display: flex; /* Enable flex container for images */
+      }
+
+      .image {
+        width: 100%;
+        max-width: 100%; /* Ensures the image doesn't exceed its container */
+        height: auto; /* Maintains the image's aspect ratio */
+        flex: 0 0 auto; /* Prevents images from shrinking or growing */
+      }
+
+      #progressBarContainer {
+        position: relative;
+        width: 100%;
+        height: 50px;
+        background-color: #000312;
+        border-radius: 0px 0px 10px 10px;
+        overflow: hidden;
+      }
+
+      #progressBar {
+        height: 100%;
+        width: 0;
+        background-color: #4f7728;
+        transition: width 0.5s ease-in-out;
+      }
+
+      #slideCount {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        color: white;
+        font-size: 14px;
+        z-index: 1;
+        font-size: 30px;
+        font-weight: bolder;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="imageCard">
+      <div id="imageContainer">
+        <div id="imageSlider">
+          <!-- Embed images directly in the HTML -->
+          <img src="slides/image1.png" class="image" />
+          <img src="slides/image2.png" class="image" />
+          <!-- Add more images as needed -->
+        </div>
+      </div>
+      <div id="progressBarContainer">
+        <div id="progressBar"></div>
+        <div id="slideCount">0/0</div>
+      </div>
+    </div>
+
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
+    <script>
+      let currentSlide = 0;
+      let totalSlides = $("#imageSlider img").length;
+
+      const imageSlider = $("#imageSlider");
+      const progressBar = $("#progressBar");
+      const slideCount = $("#slideCount");
+
+      // Function to start the slideshow
+      function startSlideshow() {
+        setInterval(() => {
+          currentSlide = (currentSlide + 1) % totalSlides;
+          updateSlideCount();
+          updateProgressBar();
+          updateSliderPosition();
+        }, 5000); // Change the interval as per your preference
+      }
+
+      // Function to update the slide count
+      function updateSlideCount() {
+        slideCount.text(`${currentSlide + 1}/${totalSlides}`);
+      }
+
+      // Function to update the progress bar
+      function updateProgressBar() {
+        const progress = ((currentSlide + 1) / totalSlides) * 100;
+        progressBar.css("width", `${progress}%`);
+      }
+
+      // Function to update the slider position
+      function updateSliderPosition() {
+        const newPosition = -currentSlide * 100 + "%";
+        imageSlider.css("transform", `translateX(${newPosition})`);
+      }
+
+      // Initialize the overlay
+      startSlideshow();
+    </script>
+  </body>
+</html>