diff --git a/js/WorkflowAI-H24-scr501-en.html b/js/WorkflowAI-H24-scr501-en.html
index 3b916cf..3e171ba 100644
--- a/js/WorkflowAI-H24-scr501-en.html
+++ b/js/WorkflowAI-H24-scr501-en.html
@@ -123,7 +123,7 @@ <h2 class="dmview-title">##store_lb##</h2>
         <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
             integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"
             defer></script>
-        <script src="https://therealtimex.github.io/rtlibrary/js/mediaSlider.js">defer ></script>
+        <script src="https://therealtimex.github.io/rtlibrary/js/mediaSlider_v2.js">defer ></script>
         <script>
                 document.addEventListener('DOMContentLoaded', () => {
                     const listFiles = "https://img.icons8.com/ios-filled/50/youtube-squared.png;https://img.icons8.com/arcade/64/youtube-squared.png;https://img.icons8.com/officel/50/facebook-new.png;https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf;https://filesamples.com/samples/document/docx/sample3.docx;https://www.w3resource.com/python-exercises/pandas/excel/SaleData.xlsx;http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4";
diff --git a/js/mediaSlider_v2.js b/js/mediaSlider_v2.js
new file mode 100644
index 0000000..7311c60
--- /dev/null
+++ b/js/mediaSlider_v2.js
@@ -0,0 +1,172 @@
+class MediaSlider {
+    constructor(containerId, mediaUrls) {
+        this.containerId = containerId;
+        this.mediaUrls = Array.isArray(mediaUrls) ? mediaUrls : []; // Ensure mediaUrls is an array
+        this.init();
+    }
+
+    init() {
+        this.injectStyles();
+        this.createSlider();
+        this.initializeSwiper();
+    }
+
+    injectStyles() {
+        const styles = `
+            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css">
+            <style>
+                .swiper {
+                    width: 100%;
+                    height: 100%;
+                    margin: auto;
+                    border-radius: 10px;
+                    box-shadow: 0 0 2px var(--color_theme_shadow);
+                }
+                
+                .swiper-slide {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    background: var(--color_theme_surface);
+                }
+                
+                .swiper-slide img {
+                    max-width: 100%;
+                    max-height: 100%;
+                    object-fit: contain;
+                }
+                
+                .swiper-slide audio,
+                .swiper-slide video {
+                    max-width: 100%;
+                }
+                
+                .swiper-slide iframe {
+                    width: 100%;
+                    height: 100%;
+                    border: none;
+                }
+                
+                .document-viewer {
+                    width: 100%;
+                    height: 100%;
+                    overflow: auto;
+                }
+                
+                .swiper-button-next,
+                .swiper-button-prev {
+                    background: var(--color_theme_background);
+                    padding: 10px;
+                    border-radius: 50%;
+                    color: var(--color_theme_text_primary);
+                    width: 25px;
+                    height: 25px;
+                    transition: all 0.3s ease;
+                }
+                
+                .swiper-button-next:hover,
+                .swiper-button-prev:hover {
+                    background: var(--color_theme_surface);
+                    transform: scale(1.1);
+                }
+                
+                .swiper-button-next::after,
+                .swiper-button-prev::after {
+                    font-size: 20px;
+                    font-weight: 700;
+                }
+            </style>
+        `;
+        document.head.insertAdjacentHTML('beforeend', styles);
+    }
+
+    detectMediaType(url) {
+        const extension = url.split('.').pop().toLowerCase();
+        const mediaTypes = {
+            'jpg': 'image',
+            'jpeg': 'image',
+            'png': 'image',
+            'gif': 'image',
+            'webp': 'image',
+            'avif': 'image',
+            'mp3': 'audio',
+            'm4a': 'audio',
+            'wav': 'audio',
+            'ogg': 'audio',
+            'mp4': 'video',
+            'webm': 'video',
+            'ogv': 'video',
+            'pdf': 'pdf',
+            'docx': 'office',
+            'xlsx': 'office',
+            'pptx': 'office'
+        };
+        return mediaTypes[extension] || 'unknown';
+    }
+
+    createMediaElement(url) {
+        if (!url) {
+            return `<i class="bi bi-file-earmark-x" title="Documents not available"></i>`;
+        }
+        const mediaType = this.detectMediaType(url);
+        switch(mediaType) {
+            case 'image':
+                return `<img src="${url}" alt="Slide">`;
+            case 'audio':
+                return `<audio controls><source src="${url}" type="audio/${url.split('.').pop()}"></audio>`;
+            case 'video':
+                return `<video controls width="100%"><source src="${url}" type="video/${url.split('.').pop()}"></video>`;
+            case 'pdf':
+                return `<iframe src="https://docs.google.com/viewer?url=${encodeURIComponent(url)}&embedded=true"></iframe>`;
+            case 'office':
+                return `<iframe src="https://docs.google.com/viewer?url=${encodeURIComponent(url)}&embedded=true"></iframe>`;
+            default:
+                return `<iframe src="https://docs.google.com/viewer?url=${encodeURIComponent(url)}&embedded=true"></iframe>`;
+        }
+    }
+
+    createSlider() {
+        if (this.mediaUrls.length === 0) {
+            document.getElementById(this.containerId).innerHTML = '<div style="display: flex; justify-content: center; align-items: center; height: 40vh; font-weight: bold; color: #666;">📄 No documents 📋</div>';
+            return; // Exit if there are no media URLs
+        }
+
+        const sliderHtml = `
+            <div class="swiper">
+                <div class="swiper-wrapper">
+                    ${this.mediaUrls.map(url => `
+                        <div class="swiper-slide">
+                            ${this.createMediaElement(url)}
+                        </div>
+                    `).join('')}
+                </div>
+                <div class="swiper-button-next"></div>
+                <div class="swiper-button-prev"></div>
+            </div>
+        `;
+        document.getElementById(this.containerId).innerHTML = sliderHtml;
+    }
+
+    initializeSwiper() {
+        const script = document.createElement('script');
+        script.src = 'https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js';
+        script.onload = () => {
+            new Swiper('.swiper', {
+                loop: true,
+                autoplay: false,
+                navigation: {
+                    nextEl: '.swiper-button-next',
+                    prevEl: '.swiper-button-prev',
+                },
+                effect: 'fade',
+                fadeEffect: {
+                    crossFade: true
+                },
+                speed: 900,
+                preloadImages: true,
+                watchSlidesProgress: true
+            });
+        };
+        document.body.appendChild(script);
+    }
+}
\ No newline at end of file