From 87cad9d6c9cb9e262ce489a6197538289dd42886 Mon Sep 17 00:00:00 2001
From: artemskakun <skakunaartem947@gmail.com>
Date: Wed, 28 Feb 2024 20:49:55 +0300
Subject: [PATCH] Fixed

---
 .eslintrc.json             |   6 ++
 .github/workflows/main.yml |   4 +-
 .stylelintrc.json          |   8 +-
 content.css                |  10 ++-
 content.html               |  33 +++++----
 package.json               |   5 +-
 script.js                  | 145 +++++++++++++++++++++----------------
 7 files changed, 128 insertions(+), 83 deletions(-)
 create mode 100644 .eslintrc.json

diff --git a/.eslintrc.json b/.eslintrc.json
new file mode 100644
index 0000000..42e3728
--- /dev/null
+++ b/.eslintrc.json
@@ -0,0 +1,6 @@
+{
+    "extends": "eslint-config-standard",
+    "rules": {
+        "no-unused-vars": "off"
+      }
+}
\ No newline at end of file
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 1e95a8a..3aaca5d 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -17,4 +17,6 @@ jobs:
       - name: Install dependencies
         run: npm install
       - name: Lint CSS
-        run: npm run lint:css
\ No newline at end of file
+        run: npm run lint:css
+      - name: Lint JS
+        run: npm run lint:js
\ No newline at end of file
diff --git a/.stylelintrc.json b/.stylelintrc.json
index 64f7a48..f1ed28d 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -1,3 +1,9 @@
 {
-    "extends": ["stylelint-config-standard"]
+    "extends": ["stylelint-config-standard"],
+    "rules": {
+        "selector-pseudo-class-no-unknown": null,
+        "selector-type-no-unknown": null, 
+        "property-no-unknown": null, 
+        "at-rule-no-unknown": null 
+      }
 }
\ No newline at end of file
diff --git a/content.css b/content.css
index 9743895..0b6fdcf 100644
--- a/content.css
+++ b/content.css
@@ -132,9 +132,9 @@ body {
 }
 
 #scroll-button {
-  position: absolute;
-  bottom: 20px;
-  left: 50%;
+  position: fixed;
+  top: 30px;
+  left: 96%;
   transform: translateX(-50%);
   background-color: transparent;
   border: none;
@@ -183,6 +183,10 @@ video {
     margin-bottom: 70px;
   }
 
+  #scroll-button {
+    left: 90%;
+  }
+
   video {
     width: 100%;
   }
diff --git a/content.html b/content.html
index a4ddc8f..b88a73d 100644
--- a/content.html
+++ b/content.html
@@ -17,29 +17,34 @@
       <a href="index.html" class="return-btn">
         <img src="res/home.png" alt="Вернуться на главную" />
       </a>
-      <div class="slider-wrapper">
+      <div class="slider-wrapper" id="slider1">
         <button id="prev-slide" class="slide-button material-symbols-rounded">
           chevron_left
         </button>
         <ul class="image-list">
-          <img class="image-item" src="res/1.jpg" alt="img-1" />
-          <img class="image-item" src="res/2.jpg" alt="img-2" />
-          <img class="image-item" src="res/3.jpg" alt="img-3" />
-          <img class="image-item" src="res/4.jpg" alt="img-4" />
-          <img class="image-item" src="res/5.jpg" alt="img-5" />
-          <img class="image-item" src="res/6.jpg" alt="img-6" />
-          <img class="image-item" src="res/7.jpg" alt="img-7" />
-          <img class="image-item" src="res/8.jpg" alt="img-8" />
-          <img class="image-item" src="res/9.jpg" alt="img-9" />
-          <img class="image-item" src="res/10.jpg" alt="img-10" />
         </ul>
         <button id="next-slide" class="slide-button material-symbols-rounded">
           chevron_right
         </button>
+        <div class="slider-scrollbar">
+          <div class="scrollbar-track">
+            <div class="scrollbar-thumb"></div>
+          </div>
+        </div>
       </div>
-      <div class="slider-scrollbar">
-        <div class="scrollbar-track">
-          <div class="scrollbar-thumb"></div>
+      <div class="slider-wrapper" id="slider2">
+        <button id="prev-slide" class="slide-button material-symbols-rounded">
+          chevron_left
+        </button>
+        <ul class="image-list">
+        </ul>
+        <button id="next-slide" class="slide-button material-symbols-rounded">
+          chevron_right
+        </button>
+        <div class="slider-scrollbar">
+          <div class="scrollbar-track">
+            <div class="scrollbar-thumb"></div>
+          </div>
         </div>
       </div>
       <button id="scroll-button" onclick="scrollToBottom()">
diff --git a/package.json b/package.json
index e9e65a2..926ad25 100644
--- a/package.json
+++ b/package.json
@@ -4,11 +4,14 @@
   "description": "[Ссылка на сайт](http://kolbaser.ru/)",
   "main": "script.js",
   "scripts": {
-    "lint:css": "stylelint --fix --ignore-path .gitignore *.css"
+    "lint:css": "stylelint --fix --ignore-path .gitignore *.css",
+    "lint:js": "eslint . --fix"
   },
   "author": "",
   "license": "ISC",
   "devDependencies": {
+    "eslint": "^8.57.0",
+    "eslint-config-standard": "^17.1.0",
     "stylelint": "^16.2.1",
     "stylelint-config-standard": "^36.0.0"
   }
diff --git a/script.js b/script.js
index 099a864..06f546c 100644
--- a/script.js
+++ b/script.js
@@ -1,76 +1,95 @@
 const initSlider = () => {
-  const imageList = document.querySelector(".slider-wrapper .image-list");
-  const slideButtons = document.querySelectorAll(
-    ".slider-wrapper .slide-button"
-  );
-  const sliderScrollbar = document.querySelector(
-    ".container .slider-scrollbar"
-  );
-  const scrollbarThumb = sliderScrollbar.querySelector(".scrollbar-thumb");
-  const maxScrollLeft = imageList.scrollWidth - imageList.clientWidth;
+  const initCarousel = (containerId, images) => {
+    const container = document.getElementById(containerId)
+    const imageList = container.querySelector('.image-list')
 
-  scrollbarThumb.addEventListener("mousedown", (e) => {
-    const startX = e.clientX;
-    const thumbPosition = scrollbarThumb.offsetLeft;
-    const maxThumbPosition =
-      sliderScrollbar.getBoundingClientRect().width -
-      scrollbarThumb.offsetWidth;
+    images.forEach(imageSrc => {
+      const image = document.createElement('img')
+      image.src = imageSrc
+      image.classList.add('image-item')
+      imageList.appendChild(image)
+    })
 
-    const handleMouseMove = (e) => {
-      const deltaX = e.clientX - startX;
-      const newThumbPosition = thumbPosition + deltaX;
-      const boundedPosition = Math.max(
-        0,
-        Math.min(maxThumbPosition, newThumbPosition)
-      );
-      const scrollPosition =
-        (boundedPosition / maxThumbPosition) * maxScrollLeft;
+    const slideButtons = container.querySelectorAll('.slide-button')
+    const sliderScrollbar = container.querySelector('.slider-scrollbar')
+    const scrollbarThumb = sliderScrollbar.querySelector('.scrollbar-thumb')
+    const maxScrollLeft = imageList.scrollWidth - imageList.clientWidth
 
-      scrollbarThumb.style.left = `${boundedPosition}px`;
-      imageList.scrollLeft = scrollPosition;
-    };
-    const handleMouseUp = () => {
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-    };
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
-  });
+    scrollbarThumb.addEventListener('mousedown', (e) => {
+      const startX = e.clientX
+      const thumbPosition = scrollbarThumb.offsetLeft
+      const maxThumbPosition =
+            sliderScrollbar.getBoundingClientRect().width -
+            scrollbarThumb.offsetWidth
 
-  slideButtons.forEach((button) => {
-    button.addEventListener("click", () => {
-      const direction = button.id === "prev-slide" ? -1 : 1;
-      const scrollAmount = imageList.clientWidth * direction;
-      imageList.scrollBy({ left: scrollAmount, behavior: "smooth" });
-    });
-  });
+      const handleMouseMove = (e) => {
+        const deltaX = e.clientX - startX
+        const newThumbPosition = thumbPosition + deltaX
+        const boundedPosition = Math.max(
+          0,
+          Math.min(maxThumbPosition, newThumbPosition)
+        )
+        const scrollPosition =
+            (boundedPosition / maxThumbPosition) * maxScrollLeft
 
-  const handleSlideButtons = () => {
-    slideButtons[0].style.display = imageList.scrollLeft <= 0 ? "none" : "flex";
-    slideButtons[1].style.display =
-      imageList.scrollLeft >= maxScrollLeft ? "none" : "flex";
-  };
+        scrollbarThumb.style.left = `${boundedPosition}px`
+        imageList.scrollLeft = scrollPosition
+      }
 
-  const updateScrollThumbPosition = () => {
-    const scrollPosition = imageList.scrollLeft;
-    const thumbPosition =
-      (scrollPosition / maxScrollLeft) *
-      (sliderScrollbar.clientWidth - scrollbarThumb.offsetWidth);
-    scrollbarThumb.style.left = `${thumbPosition}px`;
-  };
+      const handleMouseUp = () => {
+        console.log('mouseup-event')
+        document.removeEventListener('mousemove', handleMouseMove)
+        document.removeEventListener('mouseup', handleMouseUp)
+      }
 
-  imageList.addEventListener("scroll", () => {
-    updateScrollThumbPosition();
-    handleSlideButtons();
-  });
-};
+      document.addEventListener('mousemove', handleMouseMove)
+      document.addEventListener('mouseup', handleMouseUp)
+    })
 
-function scrollToBottom() {
+    slideButtons.forEach((button) => {
+      button.addEventListener('click', () => {
+        const direction = button.id === 'prev-slide' ? -1 : 1
+        const scrollAmount = imageList.clientWidth * direction
+        imageList.scrollBy({ left: scrollAmount, behavior: 'smooth' })
+      })
+    })
+
+    const handleSlideButtons = () => {
+      slideButtons[0].style.display = imageList.scrollLeft <= 0 ? 'none' : 'flex'
+      slideButtons[1].style.display =
+        imageList.scrollLeft >= maxScrollLeft ? 'none' : 'flex'
+    }
+
+    const updateScrollThumbPosition = () => {
+      const scrollPosition = imageList.scrollLeft
+      const thumbPosition =
+        (scrollPosition / maxScrollLeft) *
+        (sliderScrollbar.clientWidth - scrollbarThumb.offsetWidth)
+      scrollbarThumb.style.left = `${thumbPosition}px`
+    }
+
+    imageList.addEventListener('scroll', () => {
+      updateScrollThumbPosition()
+      handleSlideButtons()
+    })
+  }
+  const slider1Images = ['res/1.jpg', 'res/2.jpg', 'res/3.jpg', 'res/4.jpg', 'res/5.jpg', 'res/1.jpg']
+  initCarousel('slider1', slider1Images)
+
+  const slider2Images = ['res/6.jpg', 'res/7.jpg', 'res/8.jpg', 'res/9.jpg', 'res/10.jpg', 'res/9.jpg']
+  initCarousel('slider2', slider2Images)
+}
+
+function scrollToBottom () {
   window.scrollTo({
     top: document.body.scrollHeight,
-    behavior: "smooth",
-  });
+    behavior: 'smooth'
+  })
 }
 
-window.addEventListener("resize", initSlider);
-window.addEventListener("load", initSlider);
+let isListenerAdded = false
+
+window.addEventListener('resize', () => {
+  isListenerAdded = false
+})
+window.addEventListener('load', initSlider)