Update README.md

README.md

@@ -538,6 +538,8 @@ body {
 
 <script>
 let currentIndex = 0;
+let startX = 0;
+let endX = 0;
 
 function showSlide(index) {
   const slides = document.querySelectorAll('.carousel-item');
@@ -561,6 +563,34 @@ 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", "");
+  }
+  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();
+  }
+}
+
+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);
 
@@ -587,12 +617,4 @@ function showSlides(n) {
   slides[slideIndex-1].style.display = "block"; 
   dots[slideIndex-1].className += " active";
 }
-
-function updateDots() {
-  const dots = document.getElementsByClassName("dot");
-  for (let i = 0; i < dots.length; i++) {
-    dots[i].className = dots[i].className.replace(" active", "");
-  }
-  dots[currentIndex].className += " active";
-}
 </script>