From 24f756ef54eebcb3fe1e525330e837f12aa27fe7 Mon Sep 17 00:00:00 2001
From: "dhanush.s" <dhanush.s@opsmonsters.in>
Date: Wed, 24 Sep 2025 00:18:04 +0530
Subject: [PATCH] feat: add slider

---
 index.html  | 367 ++++++++++++++++++++++++++++++++++---
 slide.html  |  29 +++
 slider.html | 509 ++++++++++++++++++++++++++++++----------------------
 3 files changed, 672 insertions(+), 233 deletions(-)
 create mode 100644 slide.html

diff --git a/index.html b/index.html
index b15224f..160c07f 100644
--- a/index.html
+++ b/index.html
@@ -354,6 +354,10 @@
             color: #3182ce;
         }
 
+        .highlight {
+            color: #1c4980;
+        }
+
         .stat-label {
             font-size: clamp(0.8rem, 1vw, 1rem);
             color: #718096;
@@ -566,30 +570,145 @@
     </section>
 
 
-        <div id="slider-placeholder"></div>
+    <style>
+        .opportunity-section {
+            padding: 0 0 50px 0;
+        }
 
-        <script>
-        fetch("slider.html")
-        .then(res => res.text())
-        .then(data => {
-            const placeholder = document.getElementById("slider-placeholder");
-            placeholder.innerHTML = data;
+        .container {
+            max-width: 1152px;
+            margin: 0 auto;
+        }
 
-            // Run the slider initialization function
-            const scripts = placeholder.querySelectorAll("script");
-            scripts.forEach(oldScript => {
-            if (oldScript.textContent.includes("initSlider")) {
-                const newScript = document.createElement("script");
-                newScript.textContent = oldScript.textContent + "\ninitSlider();";
-                document.body.appendChild(newScript);
+        .header {
+            text-align: start;
+            margin-bottom: 10px;
+        }
+
+        .title {
+            font-size: 35px;
+            font-weight: bold;
+            color: #111827;
+            margin-bottom: 10px;
+        }
+
+        .header-content {
+            display: flex;
+            align-items: start;
+            justify-content: start;
+            gap: 16px;
+        }
+
+        .subtitle {
+            color: #6b7280;
+            line-height: 0px;
+        }
+
+        .arrow-icon {
+            width: 16px;
+            height: 16px;
+        }
+
+        .cards-grid {
+            display: grid;
+            grid-template-columns: 1fr;
+            gap: 24px;
+        }
+
+        @media (min-width: 768px) {
+            .cards-grid {
+                grid-template-columns: repeat(3, 1fr);
             }
-            });
-        })
-        .catch(err => console.error("Failed to load slider:", err));
-        </script>
+        }
 
+        @media (min-width: 1024px) {
+            .cards-grid {
+                grid-template-columns: repeat(5, 1fr);
+            }
+        }
 
+        .card-add {
+            border-radius: 24px;
+            padding: 24px;
+            position: relative;
+            overflow: hidden;
+            min-height: 160px;
+            cursor: pointer;
+            transition: transform 0.3s ease;
+        }
 
+        .card-add:hover {
+            transform: scale(1.05);
+        }
+
+        .card-add h3 {
+            font-size: 20px;
+            font-weight: bold;
+            margin-bottom: 16px;
+        }
+
+        .card-quizzes {
+            background: linear-gradient(to bottom right, #60a5fa, #2563eb);
+            color: white;
+        }
+
+        .card-hackathons {
+            background: linear-gradient(to bottom right, #4ade80, #22c55e);
+            color: white;
+        }
+
+        .card-scholarships {
+            background: linear-gradient(to bottom right, #a855f7, #7c3aed);
+            color: white;
+        }
+
+        .card-conferences {
+            background: linear-gradient(to bottom right, #fed7aa, #fdba74);
+            color: #1f2937;
+        }
+
+        .card-festivals {
+            background: linear-gradient(to bottom right, #facc15, #eab308);
+            color: #1f2937;
+        }
+    </style>
+
+    <section class="opportunity-section">
+        <div class="container">
+            <div class="header">
+                <h2 class="title">
+                    Pick <span class="highlight">The Right Opportunity!</span>
+                </h2>
+                <div class="header-content">
+                    <p class="subtitle">Explore opportunities that best suits your skills and interests!</p>
+                </div>
+            </div>
+
+            <div class="cards-grid">
+                <div class="card-add  card-quizzes">
+                    <h3>Quizzes</h3>
+                </div>
+
+                <div class="card-add  card-hackathons">
+                    <h3>Hackathons</h3>
+                </div>
+
+                <div class="card-add  card-scholarships">
+                    <h3>Scholarships</h3>
+                </div>
+
+                <div class="card-add  card-conferences">
+                    <h3>Conferences</h3>
+                </div>
+
+                <div class="card-add  card-festivals">
+                    <h3>College Festivals</h3>
+                </div>
+            </div>
+        </div>
+    </section>
+    <div id="slider"></div>
+    <div id="slide"></div>
 
     <section class="our-numbers">
         <h2>Our Numbers</h2>
@@ -626,10 +745,6 @@
             </div>
         </div>
     </section>
-
-
-    
-
     <div id="footer-placeholder"></div>
     <script>
         fetch("footer.html")
@@ -638,9 +753,217 @@
                 document.getElementById("footer-placeholder").innerHTML = data;
             })
             .catch(err => console.error("Failed to load footer:", err));
+        fetch("slider.html")
+            .then(res => res.text())
+            .then(data => {
+                document.getElementById("slider").innerHTML = data;
+            })
+            .catch(err => console.error("Failed to load slider:", err));
+        fetch("slide.html")
+            .then(res => res.text())
+            .then(data => {
+                document.getElementById("slide").innerHTML = data;
+            })
+            .catch(err => console.error("Failed to load footer:", err));
         function goToLogin() {
             window.location.href = "/login";
         }
+
+        (function () {
+            // Prevent multiple instances
+            if (window.Slide1rSliderLoaded) {
+                return;
+            }
+            window.Slide1rSliderLoaded = true;
+
+            class Slide1rSlider {
+                constructor() {
+                    // Add a small delay to ensure DOM is fully rendered
+                    setTimeout(() => {
+                        this.initSlider();
+                    }, 100);
+                }
+
+                initSlider() {
+                    try {
+                        this.track = document.getElementById('slide1rTrack');
+                        this.slides = document.querySelectorAll('.slide1');
+                        this.prevBtn = document.getElementById('prevBtn');
+                        this.nextBtn = document.getElementById('nextBtn');
+
+                        if (!this.track || this.slides.length === 0) {
+                            console.warn("Slider DOM elements not found. Retrying...");
+                            // Retry after a short delay
+                            setTimeout(() => this.initSlider(), 200);
+                            return;
+                        }
+
+                        this.currentIndex = 0;
+                        this.totalSlides = this.slides.length;
+                        this.autoPlayDuration = 5000; // 5 seconds
+
+                        this.init();
+                    } catch (err) {
+                        console.error("Slider initialization failed:", err);
+                    }
+                }
+
+                init() {
+                    try {
+                        this.updateSlider();
+                        this.bindEvents();
+                        this.startAutoPlay();
+                        this.bindKeyboardEvents();
+                    } catch (err) {
+                        console.error("Slider init error:", err);
+                    }
+                }
+
+
+                updateSlider() {
+                    try {
+                        const translateX = -this.currentIndex * 100;
+                        this.track.style.transform = `translateX(${translateX}%)`;
+
+                    } catch (err) {
+                        console.error("Error updating slider:", err);
+                    }
+                }
+
+                nextSlide() {
+                    try {
+                        this.currentIndex = (this.currentIndex + 1) % this.totalSlides;
+                        this.updateSlider();
+                        this.restartAutoPlay();
+                    } catch (err) {
+                        console.error("Error going to next slide:", err);
+                    }
+                }
+
+                prevSlide() {
+                    try {
+                        this.currentIndex = this.currentIndex === 0 ? this.totalSlides - 1 : this.currentIndex - 1;
+                        this.updateSlider();
+                        this.restartAutoPlay();
+                    } catch (err) {
+                        console.error("Error going to previous slide:", err);
+                    }
+                }
+
+                goToSlide(index) {
+                    try {
+                        this.currentIndex = index;
+                        this.updateSlider();
+                        this.restartAutoPlay();
+                    } catch (err) {
+                        console.error("Error going to slide:", err);
+                    }
+                }
+
+                startAutoPlay() {
+                    try {
+                        this.stopAutoPlay();
+
+                        this.autoPlayInterval = setInterval(() => {
+                            this.nextSlide();
+                        }, this.autoPlayDuration);
+
+                    } catch (err) {
+                        console.error("Error starting autoplay:", err);
+                    }
+                }
+
+                stopAutoPlay() {
+                    if (this.autoPlayInterval) {
+                        clearInterval(this.autoPlayInterval);
+                        this.autoPlayInterval = null;
+                    }
+                }
+
+                restartAutoPlay() {
+                    this.stopAutoPlay();
+                    this.startAutoPlay();
+                }
+
+                bindEvents() {
+                    try {
+                        if (this.nextBtn) {
+                            this.nextBtn.addEventListener('click', () => this.nextSlide());
+                        }
+
+                        if (this.prevBtn) {
+                            this.prevBtn.addEventListener('click', () => this.prevSlide());
+                        }
+
+                        // Pause on hover
+                        const container = document.querySelector('.slide1r-container');
+                        if (container) {
+                            container.addEventListener('mouseenter', () => this.stopAutoPlay());
+                            container.addEventListener('mouseleave', () => this.startAutoPlay());
+                        }
+
+                        // Touch support
+                        let startX = 0;
+                        let endX = 0;
+
+                        if (this.track) {
+                            this.track.addEventListener('touchstart', (e) => {
+                                startX = e.touches[0].clientX;
+                                this.stopAutoPlay();
+                            });
+
+                            this.track.addEventListener('touchmove', (e) => {
+                                endX = e.touches[0].clientX;
+                            });
+
+                            this.track.addEventListener('touchend', () => {
+                                const deltaX = startX - endX;
+                                if (Math.abs(deltaX) > 50) {
+                                    if (deltaX > 0) {
+                                        this.nextSlide();
+                                    } else {
+                                        this.prevSlide();
+                                    }
+                                }
+                                this.startAutoPlay();
+                            });
+                        }
+                    } catch (err) {
+                        console.error("Error binding events:", err);
+                    }
+                }
+
+                bindKeyboardEvents() {
+                    // Use a more specific event listener to avoid conflicts
+                    const keyHandler = (e) => {
+                        // Only respond if the slider container is visible
+                        const container = document.querySelector('.slide1r-container');
+                        if (container && this.isElementInViewport(container)) {
+                            if (e.key === 'ArrowLeft') {
+                                this.prevSlide();
+                            } else if (e.key === 'ArrowRight') {
+                                this.nextSlide();
+                            }
+                        }
+                    };
+
+                    document.addEventListener('keydown', keyHandler);
+                }
+
+                isElementInViewport(el) {
+                    const rect = el.getBoundingClientRect();
+                    return (
+                        rect.top >= 0 &&
+                        rect.left >= 0 &&
+                        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+                        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+                    );
+                }
+            }
+
+            // Initialize the slider immediately
+            new Slide1rSlider();
+        })();
     </script>
 
 
diff --git a/slide.html b/slide.html
new file mode 100644
index 0000000..4dafdc0
--- /dev/null
+++ b/slide.html
@@ -0,0 +1,29 @@
+<style>
+    .hover-slider {
+        padding: 0 0 50px 0;
+    }
+
+    .container-slider {
+        height: 200px;
+        max-width: 1152px;
+        margin: 0 auto;
+        display: flex;
+        gap: 20px;
+        align-items: center;
+    }
+
+    .container-slider-baby {
+        width: 100px;
+        height: 100px;
+        background: red;
+    }
+</style>
+
+<section class="hover-slider">
+    <div class="container-slider">
+        <div class="container-slider-baby container-slider-1"></div>
+        <div class="container-slider-baby container-slider-2"></div>
+        <div class="container-slider-baby container-slider-3"></div>
+        <div class="container-slider-baby container-slider-4"></div>
+    </div>
+</section>
\ No newline at end of file
diff --git a/slider.html b/slider.html
index 516594e..022443e 100644
--- a/slider.html
+++ b/slider.html
@@ -1,247 +1,334 @@
-<div class="slider-container">
-  <div class="slider-wrapper">
-    <div class="slider-track" id="sliderTrack">
-      <div class="slide"></div>
-      <div class="slide"></div>
-      <div class="slide"></div>
-      <div class="slide"></div>
-    </div>
-  </div>
-
-  <button class="nav-button prev-btn" id="prevBtn"></button>
-  <button class="nav-button next-btn" id="nextBtn"></button>
-
-  <div class="dots-container" id="dotsContainer"></div>
-</div>
-
 <style>
-    .slider-container {
-        margin: 0 auto; 
-        max-width: 800px;
-        width: 100%;
-        position: relative;
+  .slide1r-container {
+    margin: 0 auto;
+    max-width: 1000px;
+    width: 100%;
+    position: relative;
+    border-radius: 20px;
+    padding: 25px;
+    font-family: 'Arial', sans-serif;
+  }
+
+  .slide1r-wrapper {
+    overflow: hidden;
+    border-radius: 16px;
+    position: relative;
+  }
+
+  .slide1r-track {
+    display: flex;
+    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .slide1 {
+    min-width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .slide1-box {
+    display: flex;
+    gap: 25px;
+    width: 100%;
+    height: 300px;
+  }
+
+  .image-container {
+    flex: 1;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    border-radius: 16px;
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
+    transition: all 0.3s ease;
+  }
+
+  .image-container:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.18);
+  }
+
+  .slide1-box img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.4s ease;
+    opacity: 0;
+    animation: fadeIn 0.5s ease forwards;
+  }
+
+  .image-container:hover img {
+    transform: scale(1.05);
+  }
+
+  /* Image overlays */
+  .image-overlay {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
+    color: white;
+    padding: 20px;
+    transform: translateY(100%);
+    transition: transform 0.3s ease;
+  }
+
+  .image-container:hover .image-overlay {
+    transform: translateY(0);
+  }
+
+  .image-overlay h4 {
+    margin: 0 0 5px 0;
+    font-size: 16px;
+    font-weight: 600;
+  }
+
+  .image-overlay p {
+    margin: 0;
+    font-size: 13px;
+    opacity: 0.9;
+  }
+
+  /* Navigation buttons */
+  .nav-button {
+    position: absolute;
+    outline: solid rgba(166, 166, 166, 0.485) 1px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(10px);
+    border: none;
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+    color: #333;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    z-index: 10;
+  }
+
+  .nav-button:hover {
+    background: white;
+    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25);
+  }
+
+  .prev-btn {
+    left: -50px;
+  }
+
+  .next-btn {
+    right: -50px;
+  }
+
+  .nav-button::before {
+    content: '';
+    width: 12px;
+    height: 12px;
+    border-top: 2.5px solid currentColor;
+    border-right: 2.5px solid currentColor;
+  }
+
+  .prev-btn::before {
+    transform: rotate(-135deg);
+    margin-left: 3px;
+  }
+
+  .next-btn::before {
+    transform: rotate(45deg);
+    margin-right: 3px;
+  }
+
+  /* Dots */
+  .dots-container {
+    display: flex;
+    justify-content: center;
+    gap: 12px;
+    margin-top: 25px;
+  }
+
+  .dot {
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background: #e0e0e0;
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .dot.active {
+    background: #667eea;
+    transform: scale(1.3);
+    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+  }
+
+  .dot:hover:not(.active) {
+    background: #bbb;
+    transform: scale(1.1);
+  }
+
+  /* Mobile responsive */
+  @media (max-width: 768px) {
+    .slide1r-container {
+      margin: 15px;
+      padding: 20px;
     }
 
-    .slider-wrapper {
-        overflow: hidden;
-        border-radius: 16px;
-        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
+    .slide1-box {
+      flex-direction: column;
+      gap: 15px;
+      height: auto;
     }
 
-    .slider-track {
-        display: flex;
-        transition: transform 0.5s ease;
+    .image-container {
+      height: 250px;
     }
 
-    .slide {
-        min-width: 100%;
-        height: 400px;
-        background-size: cover;
-        background-position: center;
-        background-repeat: no-repeat;
-    }
-
-    .slide:nth-child(1) {
-        background-image: url('https://images.unsplash.com/photo-1557804506-669a67965ba0?w=800&h=400&fit=crop&crop=entropy&cs=tinysrgb');
-    }
-
-    .slide:nth-child(2) {
-        background-image: url('https://images.unsplash.com/photo-1542744094-24638eff58bb?w=800&h=400&fit=crop&crop=entropy&cs=tinysrgb');
-    }
-
-    .slide:nth-child(3) {
-        background-image: url('https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800&h=400&fit=crop&crop=entropy&cs=tinysrgb');
-    }
-
-    .slide:nth-child(4) {
-        background-image: url('https://images.unsplash.com/photo-1551434678-e076c223a692?w=800&h=400&fit=crop&crop=entropy&cs=tinysrgb');
-    }
-
-    /* Navigation buttons */
     .nav-button {
-        position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
-        background: white;
-        border: none;
-        width: 50px;
-        height: 50px;
-        border-radius: 50%;
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 18px;
-        color: #333;
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-        transition: all 0.3s ease;
-        z-index: 10;
-    }
-
-    .nav-button:hover {
-        background: #f8f9fa;
-        transform: translateY(-50%) scale(1.1);
+      width: 50px;
+      height: 50px;
+      font-size: 18px;
     }
 
     .prev-btn {
-        left: 20px;
+      left: -20px;
     }
 
     .next-btn {
-        right: 20px;
+      right: -20px;
     }
 
-    .nav-button::before {
-        content: '';
-        width: 8px;
-        height: 8px;
-        border-top: 2px solid currentColor;
-        border-right: 2px solid currentColor;
+    .image-overlay {
+      padding: 15px;
     }
 
-    .prev-btn::before {
-        transform: rotate(-135deg);
-        margin-left: 2px;
+    .image-overlay h4 {
+      font-size: 15px;
     }
 
-    .next-btn::before {
-        transform: rotate(45deg);
-        margin-right: 2px;
+    .image-overlay p {
+      font-size: 12px;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .slide1r-container {
+      padding: 15px;
     }
 
-    /* Dots indicator */
-    .dots-container {
-        display: flex;
-        justify-content: center;
-        gap: 10px;
-        margin-top: 30px;
+    .slide1-box {
+      gap: 12px;
+      padding: 5px;
     }
 
-    .dot {
-        width: 12px;
-        height: 12px;
-        border-radius: 50%;
-        background: #ccc;
-        cursor: pointer;
-        transition: all 0.3s ease;
+    .image-container {
+      height: 200px;
     }
 
-    .dot.active {
-        background: #667eea;
-        transform: scale(1.2);
+    .nav-button {
+      width: 45px;
+      height: 45px;
+      font-size: 16px;
     }
 
-    .dot:hover {
-        background: #999;
+    .prev-btn {
+      left: -15px;
     }
 
-    @media (max-width: 768px) {
-        .slide {
-            height: 300px;
-        }
-
-        .nav-button {
-            width: 40px;
-            height: 40px;
-            font-size: 16px;
-        }
-
-        .prev-btn {
-            left: 10px;
-        }
-
-        .next-btn {
-            right: 10px;
-        }
+    .next-btn {
+      right: -15px;
     }
+  }
+
+  @keyframes fadeIn {
+    to {
+      opacity: 1;
+    }
+  }
 </style>
 
+<div class="slide1r-container">
+  <div class="slide1r-wrapper">
+    <div class="slide1r-track" id="slide1rTrack">
+      <!-- Slide 1 -->
+      <div class="slide1">
+        <div class="slide1-box">
+          <div class="image-container">
+            <img
+              src="https://images.unsplash.com/photo-1557804506-669a67965ba0?w=500&h=400&fit=crop&crop=entropy&cs=tinysrgb"
+              alt="Business Meeting">
+            <div class="image-overlay">
+              <h4>Business Innovation</h4>
+              <p>Modern workspace collaboration</p>
+            </div>
+          </div>
+          <div class="image-container">
+            <img
+              src="https://images.unsplash.com/photo-1542744094-24638eff58bb?w=500&h=400&fit=crop&crop=entropy&cs=tinysrgb"
+              alt="Architecture">
+            <div class="image-overlay">
+              <h4>Modern Architecture</h4>
+              <p>Contemporary design solutions</p>
+            </div>
+          </div>
+        </div>
+      </div>
 
-<script>
-  function initSlider() {
-    class SimpleSlider {
-      constructor() {
-        this.track = document.getElementById('sliderTrack');
-        this.slides = document.querySelectorAll('.slide');
-        this.prevBtn = document.getElementById('prevBtn');
-        this.nextBtn = document.getElementById('nextBtn');
-        this.dotsContainer = document.getElementById('dotsContainer');
+      <!-- Slide 2 -->
+      <div class="slide1">
+        <div class="slide1-box">
+          <div class="image-container">
+            <img
+              src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=500&h=400&fit=crop&crop=entropy&cs=tinysrgb"
+              alt="Analytics">
+            <div class="image-overlay">
+              <h4>Data Analytics</h4>
+              <p>Business intelligence insights</p>
+            </div>
+          </div>
+          <div class="image-container">
+            <img
+              src="https://images.unsplash.com/photo-1551434678-e076c223a692?w=500&h=400&fit=crop&crop=entropy&cs=tinysrgb"
+              alt="Technology">
+            <div class="image-overlay">
+              <h4>Technology Hub</h4>
+              <p>Innovation and development</p>
+            </div>
+          </div>
+        </div>
+      </div>
 
-        this.currentIndex = 0;
-        this.totalSlides = this.slides.length;
+      <!-- Slide 3 -->
+      <div class="slide1">
+        <div class="slide1-box">
+          <div class="image-container">
+            <img
+              src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?w=500&h=400&fit=crop&crop=entropy&cs=tinysrgb"
+              alt="Creativity">
+            <div class="image-overlay">
+              <h4>Creative Space</h4>
+              <p>Inspiration and expression</p>
+            </div>
+          </div>
+          <div class="image-container">
+            <img
+              src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=500&h=400&fit=crop&crop=entropy&cs=tinysrgb"
+              alt="Beach">
+            <div class="image-overlay">
+              <h4>Tropical Paradise</h4>
+              <p>Natural beauty and relaxation</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 
-        this.init();
-      }
-
-      init() {
-        this.createDots();
-        this.updateSlider();
-        this.bindEvents();
-        this.startAutoPlay();
-      }
-
-      createDots() {
-        for (let i = 0; i < this.totalSlides; i++) {
-          const dot = document.createElement('div');
-          dot.classList.add('dot');
-          if (i === 0) dot.classList.add('active');
-          dot.addEventListener('click', () => this.goToSlide(i));
-          this.dotsContainer.appendChild(dot);
-        }
-      }
-
-      updateSlider() {
-        const translateX = -this.currentIndex * 100;
-        this.track.style.transform = `translateX(${translateX}%)`;
-
-        const dots = this.dotsContainer.querySelectorAll('.dot');
-        dots.forEach((dot, index) => {
-          dot.classList.toggle('active', index === this.currentIndex);
-        });
-      }
-
-      nextSlide() {
-        this.currentIndex = (this.currentIndex + 1) % this.totalSlides;
-        this.updateSlider();
-      }
-
-      prevSlide() {
-        this.currentIndex = this.currentIndex === 0 ? this.totalSlides - 1 : this.currentIndex - 1;
-        this.updateSlider();
-      }
-
-      goToSlide(index) {
-        this.currentIndex = index;
-        this.updateSlider();
-      }
-
-      startAutoPlay() {
-        setInterval(() => {
-          this.nextSlide();
-        }, 4000);
-      }
-
-      bindEvents() {
-        this.nextBtn.addEventListener('click', () => this.nextSlide());
-        this.prevBtn.addEventListener('click', () => this.prevSlide());
-
-        let startX = 0;
-        this.track.addEventListener('touchstart', (e) => {
-          startX = e.touches[0].clientX;
-        });
-
-        this.track.addEventListener('touchend', (e) => {
-          const endX = e.changedTouches[0].clientX;
-          const diff = startX - endX;
-
-          if (Math.abs(diff) > 50) {
-            if (diff > 0) this.nextSlide();
-            else this.prevSlide();
-          }
-        });
-      }
-    }
-
-    new SimpleSlider();
-  }
-</script>
+  <button class="nav-button prev-btn" id="prevBtn" aria-label="Previous slide"></button>
+  <button class="nav-button next-btn" id="nextBtn" aria-label="Next slide"></button>
+</div>
\ No newline at end of file