feat: add slideshow functionality and styles to enhance image display

src/css/custom.css

@@ -1054,3 +1054,83 @@
     width: 100%; /* Set a base width */
     aspect-ratio: 4 / 1; /* Maintain the aspect ratio */
 }
+
+/* Slideshow styles */
+.slideshow-container {
+    max-width: 100%;
+    margin: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.slideshow-wrapper {
+    width: 100%;
+    position: relative;
+}
+
+.slides {
+    display: none;
+    width: 100%;
+}
+
+.slides img {
+    width: 100%;
+    height: auto;
+    display: block;
+    max-height: 500px;
+    object-fit: contain;
+}
+
+/* Update to fix slideshow image sizing */
+.slides img {
+    width: auto;
+    max-width: 100%;
+    height: auto;
+    max-height: 400px;
+    margin: 0 auto;
+    object-fit: contain;
+}
+
+.slideshow-text {
+    width: 100%;
+    padding: 15px;
+    text-align: center;
+    color: #333; /* Dark color for text */
+}
+
+.slideshow-text p {
+    margin: 0;
+    padding: 0;
+}
+
+.more-link {
+    margin-top: 8px;
+    font-size: 0.9rem;
+}
+
+/* Fading animation */
+.fade {
+    animation-name: fade;
+    animation-duration: 1.5s;
+}
+
+@keyframes fade {
+    from {opacity: .4} 
+    to {opacity: 1}
+}
+
+/* Responsive styling for slideshow */
+@media screen and (max-width: 768px) {
+    .slideshow-text {
+        padding: 10px;
+        font-size: 14px;
+    }
+}
+
+@media screen and (max-width: 480px) {
+    .slideshow-text {
+        padding: 8px;
+        font-size: 12px;
+    }
+}

src/css/extra.css

@@ -6,6 +6,7 @@
 }
 
 .md-typeset {
+
     .admonition.frequent-question,
     details.frequent-question,
     .admonition.faq,
@@ -39,7 +40,8 @@
 }
 
 mark.state1 {
-    background-color: #ffd699; /* A somewhat orange color */
+    background-color: #ffd699;
+    /* A somewhat orange color */
 }
 
 mark.state2 {
@@ -61,3 +63,73 @@ mark.state4 {
 .faq {
     color: #FF8D1A
 }
+
+.slideshow-container {
+    max-width: 100%;
+    margin: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.slideshow-wrapper {
+    width: 100%;
+    position: relative;
+}
+
+.slides {
+    display: none;
+    width: 100%;
+}
+
+.slides img {
+    width: 100%;
+    height: auto;
+    display: block;
+    max-height: 500px;
+    object-fit: contain;
+}
+
+.slideshow-text {
+    width: 100%;
+    padding: 15px;
+    text-align: center;
+    color: #333;
+    /* Dark color for text */
+}
+
+.slideshow-text p {
+    margin: 0;
+    padding: 0;
+}
+
+/* Fading animation */
+.fade {
+    animation-name: fade;
+    animation-duration: 1.5s;
+}
+
+@keyframes fade {
+    from {
+        opacity: .4
+    }
+
+    to {
+        opacity: 1
+    }
+}
+
+/* Responsive styling */
+@media screen and (max-width: 768px) {
+    .slideshow-text {
+        padding: 10px;
+        font-size: 14px;
+    }
+}
+
+@media screen and (max-width: 480px) {
+    .slideshow-text {
+        padding: 8px;
+        font-size: 12px;
+    }
+}

src/js/custom.js

@@ -79,3 +79,30 @@ document.addEventListener('DOMContentLoaded', function() {
     // Start the cycle after 1 second
     setTimeout(toggleDialogue, 1000);
 });
+
+// Slideshow functionality
+document.addEventListener("DOMContentLoaded", function () {
+    let slideIndex = 0;
+    showSlides();
+
+    function showSlides() {
+        const slides = document.getElementsByClassName("slides");
+
+        // Hide all slides
+        for (let i = 0; i < slides.length; i++) {
+            slides[i].style.display = "none";
+        }
+
+        // Increment slide index and reset if needed
+        slideIndex++;
+        if (slideIndex > slides.length) {
+            slideIndex = 1;
+        }
+
+        // Show the current slide
+        slides[slideIndex - 1].style.display = "block";
+
+        // Change slide every 6 seconds
+        setTimeout(showSlides, 6000);
+    }
+});