Merge pull request #1247 from Jordian0/branchj

Fixing carousel indicators in about section.

Carousel.js

@@ -0,0 +1,41 @@
+document.addEventListener('DOMContentLoaded', function () {
+    const slides = document.querySelector('.slides');
+    const radioButtons = document.querySelectorAll('input[name="radio-btn"]');
+    const labels = document.querySelectorAll('.manual-btn');
+    let currentSlide = 0;
+
+    function showSlide(index) {
+        slides.style.transform = `translateX(-${index * 14.29}%)`;
+        radioButtons[index].checked = true;
+        updateActiveLabel(index);
+    }
+
+    function updateActiveLabel(index) {
+        labels.forEach((label, i) => {
+            if (i === index) {
+                label.classList.add('active');
+            } else {
+                label.classList.remove('active');
+            }
+        });
+    }
+
+    function nextSlide() {
+        currentSlide = (currentSlide + 1) % radioButtons.length;
+        showSlide(currentSlide);
+    }
+
+    // Add click event listeners to radio buttons
+    radioButtons.forEach((radio, index) => {
+        radio.addEventListener('click', () => {
+            currentSlide = index;
+            showSlide(currentSlide);
+        });
+    });
+
+    // Show first slide initially
+    showSlide(0);
+
+    // Automatic slide change
+    setInterval(nextSlide, 5000);
+});

index.html

@@ -957,12 +957,13 @@ <h2>Forgot Password</h2>
         <div class="sliderr">
             <div class="slides">
                 <!-- Radio buttons for navigation -->
-                <input type="radio" name="radio-btn" id="radio1" checked>
+                <input type="radio" name="radio-btn" id="radio1">
                 <input type="radio" name="radio-btn" id="radio2">
                 <input type="radio" name="radio-btn" id="radio3">
                 <input type="radio" name="radio-btn" id="radio4">
                 <input type="radio" name="radio-btn" id="radio5">
                 <input type="radio" name="radio-btn" id="radio6">
+                <input type="radio" name="radio-btn" id="radio7">
 
                 <!-- Slide images -->
                 <div class="slide first">
@@ -983,15 +984,8 @@ <h2>Forgot Password</h2>
                 <div class="slide">
                     <img src="./assets/slider/img6.webp" alt="Slide 6">
                 </div>
-
-                <!-- Automatic navigation -->
-                <div class="navigation-auto">
-                    <div class="auto-btn1"></div>
-                    <div class="auto-btn2"></div>
-                    <div class="auto-btn3"></div>
-                    <div class="auto-btn4"></div>
-                    <div class="auto-btn5"></div>
-                    <div class="auto-btn6"></div>
+                <div class="slide">
+                    <img src="./assets/slider/img7.webp" alt="Slide 7">
                 </div>
             </div>
 
@@ -1003,6 +997,7 @@ <h2>Forgot Password</h2>
                 <label for="radio4" class="manual-btn"></label>
                 <label for="radio5" class="manual-btn"></label>
                 <label for="radio6" class="manual-btn"></label>
+                <label for="radio7" class="manual-btn"></label>
             </div>
         </div>
 </section>
@@ -1329,6 +1324,8 @@ <h2 class="footer-title secondary-title mt-5">Connect with us</h2>
     <script src="google_signin.js"></script>
     <script src="profiledropdown.js"></script>
 
+    <script src="Carousel.js"></script>
+
 
 <div class="gtranslate_wrapper"></div>
 <script>window.gtranslateSettings = {"default_language":"en","detect_browser_language":true,"wrapper_selector":".gtranslate_wrapper"}</script>
@@ -1340,4 +1337,4 @@ <h2 class="footer-title secondary-title mt-5">Connect with us</h2>
 
 
 </body>
-</html>
+</html>

style.css

@@ -1871,7 +1871,7 @@ a {
   font-weight: bold;
 }
 
-.text-title:hover {
+.card:hover .text-title {
   color: var(--primary-color);
 }
 
@@ -1959,13 +1959,15 @@ a {
   overflow: hidden;
   position: relative;
   margin: 0 auto;
+  border-radius: 20px;
 }
 
 .sliderr .slides {
   display: flex;
-  width: 600%;
+  width: 700%;
   height: 400px;
   position: relative; 
+  transition: transform 0.5s ease-in-out;
 }
 
 .sliderr .slides input[type="radio"] {
@@ -2004,45 +2006,9 @@ a {
   background: #fff;
 }
 
-#radio1:checked ~ .first {
-  margin-left: 0;
-}
-
-#radio2:checked ~ .first {
-  margin-left: -16.66%;
-}
-
-#radio3:checked ~ .first {
-  margin-left: -33.32%;
-}
-
-#radio4:checked ~ .first {
-  margin-left: -49.98%;
-}
-
-#radio5:checked ~ .first {
-  margin-left: -66.64%;
-}
-
-#radio6:checked ~ .first {
-  margin-left: -83.3%;
-}
-
-
-.sliderr .navigation-auto {
-  position: absolute;
-  display: flex;
-  width: 100%;
-  justify-content: center;
-  margin-top: 20px;
-}
-
-.sliderr .navigation-auto div {
-  border: 2px solid #fff;
-  padding: 5px;
-  border-radius: 10px;
-  transition: 0.4s;
-  margin: 0 5px;
+.sliderr .manual-btn.active {
+    background-color: #40D3DC;
+    color: white;
 }
 
 
@@ -2055,39 +2021,6 @@ a {
   content: none;
 }
 
-@keyframes slider {
-  0% {margin-left: 0;}
-  16.66% {margin-left: -16.66%;}
-  33.32% {margin-left: -33.32%;}
-  49.98% {margin-left: -49.98%;}
-  66.64% {margin-left: -66.64%;}
-  83.3% {margin-left: -83.3%;}
-}
-
-#radio1:checked ~ .first {
-  margin-left: 0;
-  animation: slider 36s infinite;
-}
-
-#radio2:checked ~ .first {
-  animation: slider 36s infinite;
-}
-
-#radio3:checked ~ .first {
-  animation: slider 36s infinite;
-}
-
-#radio4:checked ~ .first {
-  animation: slider 36s infinite;
-}
-
-#radio5:checked ~ .first {
-  animation: slider 36s infinite;
-}
-
-#radio6:checked ~ .first {
-  animation: slider 36s infinite;
-}
 
 .social-sharing {
   margin-top: 10px;
@@ -2325,7 +2258,7 @@ a {
   object-fit: cover;
 }
 
-.overflow-img:hover {
+.card:hover .overflow-img {
   transform: scale(1.1);
   box-shadow: 7px 7px 10px rgb(184, 0, 0);
   transition: all 0.2s ease-in-out;
@@ -3405,4 +3338,4 @@ nav{
   margin-bottom: 4rem;
   z-index: 999;
 
-}
+}