fixed slider

mate-academy · Sep 22, 2023 · 9386138 · 9386138
1 parent 287f169
commit 9386138
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 35 deletions.
diff --git a/src/index.html b/src/index.html
@@ -87,8 +87,14 @@ <h2 class="header__subtitle">We believe in the power of bold ideas that can solv
 
               <div class="slider__menu">
                 <div class="slider__buttons">
-                  <button class="slider__button slider__button--left" onclick="prevSlide()"></button>
-                  <button class="slider__button slider__button--right" onclick="nextSlide()"></button>
+                  <button
+                    type="button"
+                    class="slider__button slider__button--left"
+                  ></button>
+                  <button
+                    type="button"
+                    class="slider__button slider__button--right"
+                  ></button>
                 </div>
                 <div class="slider__info">
                   <h3 class="slider__title">INtro</h3>
@@ -464,38 +470,5 @@ <h4 class="contacts__item-title">our socials</h4>
       type="text/javascript"
       src="scripts/main.js"
     ></script>
-    <script>
-      let currentSlide = 0;
-      const slides = document.querySelectorAll('.slider__image');
-      const totalSlides = slides.length;
-
-      function showSlide(slideIndex) {
-        if (slideIndex < 0) {
-          currentSlide = totalSlides - 1;
-        } else if (slideIndex >= totalSlides) {
-          currentSlide = 0;
-        }
-
-        slides.forEach((slide, index) => {
-          if (index === currentSlide) {
-            slide.style.display = 'block';
-          } else {
-            slide.style.display = 'none';
-          }
-        });
-      }
-
-      function nextSlide() {
-        currentSlide++;
-        showSlide(currentSlide);
-      }
-
-      function prevSlide() {
-        currentSlide--;
-        showSlide(currentSlide);
-      }
-
-      showSlide(currentSlide);
-    </script>
   </body>
 </html>
diff --git a/src/scripts/main.js b/src/scripts/main.js
@@ -31,3 +31,34 @@ form.addEventListener('submit', (e) => {
   form.reset();
   window.scrollTo(0, 0);
 });
+
+const prevButton = document.querySelector('.slider__button--left');
+const nextButton = document.querySelector('.slider__button--right');
+let slideIndex = 0;
+
+showSlides(slideIndex);
+
+function plusSlide(n) {
+  showSlides((slideIndex += n));
+}
+
+function showSlides(n) {
+  const slides = document.querySelectorAll('.slider__image');
+
+  if (n > slides.length - 1) {
+    slideIndex = 0;
+  }
+
+  if (n < 0) {
+    slideIndex = slides.length - 1;
+  }
+
+  for (let i = 0; i < slides.length; i++) {
+    slides[i].style.display = 'none';
+  }
+
+  slides[slideIndex].style.display = 'block';
+}
+
+prevButton.addEventListener('click', () => plusSlide(-1));
+nextButton.addEventListener('click', () => plusSlide(1));