Update README.md

README.md

@@ -541,122 +541,64 @@ let currentIndex = 0;
 let startX = 0;
 let endX = 0;
 
-function showSlide(index) {
+document.addEventListener("DOMContentLoaded", function() {
   const slides = document.querySelectorAll('.carousel-item');
-  if (index >= slides.length) {
-    currentIndex = 0;
-  } else if (index < 0) {
-    currentIndex = slides.length - 1;
-  } else {
-    currentIndex = index;
+  const dots = document.querySelectorAll('.dot');
+
+  function showSlide(index) {
+    if (index >= slides.length) {
+      currentIndex = 0;
+    } else if (index < 0) {
+      currentIndex = slides.length - 1;
+    } else {
+      currentIndex = index;
+    }
+    slides.forEach((slide, i) => {
+      slide.classList.toggle('active', i === currentIndex);
+    });
+    updateDots();
   }
-  const offset = -currentIndex * 100;
-  document.querySelector('.carousel-inner').style.transform = `translateX(${offset}%)`;
-  updateDots();
-}
-
-function nextSlide() {
-  showSlide(currentIndex + 1);
-}
 
-function prevSlide() {
-  showSlide(currentIndex - 1);
-}
-
-function updateDots() {
-  const dots = document.getElementsByClassName("dot");
-  for (let i = 0; i < dots.length; i++) {
-    dots[i].className = dots[i].className.replace(" active", "");
+  function nextSlide() {
+    showSlide(currentIndex + 1);
   }
-  dots[currentIndex].className += " active";
-}
 
-function handleTouchStart(event) {
-  startX = event.touches[0].clientX;
-}
-
-function handleTouchMove(event) {
-  endX = event.touches[0].clientX;
-}
-
-function handleTouchEnd() {
-  if (startX > endX + 50) {
-    nextSlide();
-  } else if (startX < endX - 50) {
-    prevSlide();
+  function prevSlide() {
+    showSlide(currentIndex - 1);
   }
-}
-
-document.querySelector('.carousel-inner').addEventListener('touchstart', handleTouchStart, false);
-document.querySelector('.carousel-inner').addEventListener('touchmove', handleTouchMove, false);
-document.querySelector('.carousel-inner').addEventListener('touchend', handleTouchEnd, false);
-
-let slideIndex = 1;
-showSlides(slideIndex);
-
-function plusSlides(n) {
-  showSlides(slideIndex += n);
-}
-
-function currentSlide(n) {
-  showSlides(slideIndex = n);
-}
 
-function showSlides(n) {
-  let i;
-  const slides = document.getElementsByClassName("carousel-item");
-  const dots = document.getElementsByClassName("dot");
-  if (n > slides.length) {slideIndex = 1} 
-  if (n < 1) {slideIndex = slides.length}
-  for (i = 0; i < slides.length; i++) {
-    slides[i].style.display = "none"; 
-  }
-  for (i = 0; i < dots.length; i++) {
-    dots[i].className = dots[i].className.replace(" active", "");
+  function updateDots() {
+    dots.forEach((dot, i) => {
+      dot.classList.toggle('active', i === currentIndex);
+    });
   }
-  slides[slideIndex-1].style.display = "block"; 
-  dots[slideIndex-1].className += " active";
-}
-
-  document.addEventListener("DOMContentLoaded", function() {
-  let currentSlide = 0;
-  const slides = document.querySelectorAll(".carousel-item");
-  const totalSlides = slides.length;
 
-  document.querySelector(".carousel-control-prev").addEventListener("click", function() {
-    moveSlide(-1);
-  });
+  function handleTouchStart(event) {
+    startX = event.touches[0].clientX;
+  }
 
-  document.querySelector(".carousel-control-next").addEventListener("click", function() {
-    moveSlide(1);
-  });
+  function handleTouchMove(event) {
+    endX = event.touches[0].clientX;
+  }
 
-  function moveSlide(direction) {
-    slides[currentSlide].classList.remove("active");
-    currentSlide = (currentSlide + direction + totalSlides) % totalSlides;
-    slides[currentSlide].classList.add("active");
+  function handleTouchEnd() {
+    if (startX > endX + 50) {
+      nextSlide();
+    } else if (startX < endX - 50) {
+      prevSlide();
+    }
   }
 
-  // Initialize first slide as active
-  slides[currentSlide].classList.add("active");
+  document.querySelector('.carousel-inner').addEventListener('touchstart', handleTouchStart, false);
+  document.querySelector('.carousel-inner').addEventListener('touchmove', handleTouchMove, false);
+  document.querySelector('.carousel-inner').addEventListener('touchend', handleTouchEnd, false);
 
-  // Dot navigation
-  const dots = document.querySelectorAll(".dot");
   dots.forEach((dot, index) => {
     dot.addEventListener("click", () => {
-      slides[currentSlide].classList.remove("active");
-      currentSlide = index;
-      slides[currentSlide].classList.add("active");
-      updateDots();
+      showSlide(index);
     });
   });
 
-  function updateDots() {
-    dots.forEach(dot => dot.classList.remove("active"));
-    dots[currentSlide].classList.add("active");
-  }
-
-  // Initialize first dot as active
-  dots[currentSlide].classList.add("active");
+  showSlide(currentIndex);
 });
 </script>