doka-guide · solarrust · Jul 23, 2024 · Jun 4, 2024 · Jun 7, 2024 · Jun 7, 2024
diff --git a/recipes/slider/demos/slider-demo/images/IMG_1945.JPG b/recipes/slider/demos/slider-demo/images/IMG_1945.JPG
diff --git a/recipes/slider/demos/slider-demo/images/IMG_1946.JPG b/recipes/slider/demos/slider-demo/images/IMG_1946.JPG
diff --git a/recipes/slider/demos/slider-demo/images/IMG_1947.JPG b/recipes/slider/demos/slider-demo/images/IMG_1947.JPG
diff --git a/recipes/slider/demos/slider-demo/images/IMG_1948.JPG b/recipes/slider/demos/slider-demo/images/IMG_1948.JPG
diff --git a/recipes/slider/demos/slider-demo/images/arrow-down.svg b/recipes/slider/demos/slider-demo/images/arrow-down.svg
@@ -0,0 +1,216 @@
+<!DOCTYPE html>
+<html lang="ru">
+
+<head>
+  <title>Пример слайдера — Слайдер — Дока</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">
+  <style>
+    *,
+    *::before,
+    *::after {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    html {
+      color-scheme: dark;
+    }
+
+    body {
+      min-height: 100vh;
+      padding: 50px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: #18191C;
+      color: #FFFFFF;
+      font-family: "Roboto", sans-serif;
+    }
+
+    h3 {
+      margin: 15px auto 25px;
+      font-size: 24px;
+      line-height: 26px;
+
+    }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 30px;
+      }
+    }
+
+    .button_type_radio {
+      background-color: transparent;
+      margin: 0;
+      padding: 0;
+      width: 15px;
+      height: 15px;
+      border-radius: 50%;
+      border: 1px solid #FFFFFF;
+      margin-right: 12px;
+    }
+
+    .button_type_radio.active {
+      background-color: #C56FFF;
+    }
+
+    .prev-button,
+    .next-button {
+      position: absolute;
+      top: 65%;
+      transform: translateY(-50%);
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      width: 40px;
+      height: auto;
+    }
+
+    .prev-button {
+      left: -40px;
+      transform: rotate(45deg);
+      transform-origin: center;
+    }
+
+    .next-button {
+      right: -40px;
+      transform: rotate(-45deg);
+      transform-origin: center;
+
+    }
+
+    .slideImg {
+      width: 450px;
+      height: 225px;
+      object-fit: cover;
+    }
+
+    .slider {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      max-width: 450px;
+      width: 100%;
+      position: relative;
+    }
+
+    .slide {
+      text-align: center;
+      width: 100%;
+    }
+
+    [aria-label="Design patterns"]:focus {
+      outline: 2px solid #C56FFF;
+      outline-offset: 6px;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="slider" tabindex="0" role="region" aria-roledescription="Content Slider" aria-label="Design patterns">
+    <div class="controls" role="group" aria-label="Slide controls">
+      <button class="button button_type_radio" tabindex="0" aria-disabled="true" aria-label="show slide 1 of 4">
+      </button>
+      <button class="button button_type_radio" tabindex="0" aria-disabled="false" aria-label="show slide 2 of 4">
+      </button>
+      <button class="button button_type_radio" tabindex="0" aria-disabled="false" aria-label="show slide 3 of 4">
+      </button>
+      <button class="button button_type_radio" tabindex="0" aria-disabled="false" aria-label="show slide 4 of 4">
+      </button>
+      <button aria-label="show previous slide" class="button prev-button">
+        <img class="prev-button" src="./images/arrow-down.svg">
+      </button>
+      <button aria-label="show next slide" class="button next-button">
+        <img class="next-button" src="./images/arrow-down.svg">
+      </button>
+    </div>
+    <div class='slide' role="group" aria-roledescription="Slide" aria-labelledby="First design pattern"
+      id="carousel-item-1">
+      <h3 id="carousel-item-1__heading">Паттерн "Лето"</h3>
+      <h3 id="carousel-item-1__heading">Паттерн «Лето»</h3>
+        <img class="slideImg" src="./images/IMG_1945.JPG">
+    </div>
+    <div class='slide' hidden role="group" aria-roledescription="Slide" aria-labelledby="Second design pattern"
+      id="carousel-item-2">
+      <h3 id="carousel-item-2__heading">Паттерн "Цветочное поле"</h3>
+      <h3 id="carousel-item-2__heading">Паттерн «Цветочное поле»</h3>
+        <img class="slideImg" src="./images/IMG_1946.JPG">
+    </div>
+    <div class='slide' hidden role="group" aria-roledescription="Slide" aria-labelledby="Third design pattern"
+      id="carousel-item-3">
+      <h3 id="carousel-item-3__heading">"Паттерн Лиловый"
+        </h3>
+      <h3 id="carousel-item-3__heading">Паттерн «Лиловый»</h3>
+        <img class="slideImg" src="./images/IMG_1947.JPG">
+    </div>
+    <div class='slide' hidden role="group" aria-roledescription="Slide" aria-labelledby="Third design pattern"
+      id="carousel-item-4">
+      <h3 id="Fourth design pattern">"Паттерн Алый"</h3>
+      id="carousel-item-3">
+      <h3 id="Fourth design pattern">Паттерн «Алый»</h3>
+        <img class="slideImg" src="./images/IMG_1948.JPG">
+    </div>
+  </div>
+  </main>
+  <script>
+    document.addEventListener("DOMContentLoaded", function () {
+      const slider = document.querySelector('.slider');
+      const slides = slider.querySelectorAll('.slide');
+      const controlButtons = document.querySelectorAll('.button');
+      let currentSlide = 0;
+
+      function updateSlider() {
+        slides.forEach(slide => slide.hidden = true);
+        controlButtons.forEach(btn => btn.setAttribute('aria-disabled', false));
+
+        slides[currentSlide].hidden = false;
+
+        controlButtons[currentSlide].setAttribute('aria-disabled', true)
+
+        slider.querySelectorAll('.button_type_radio').forEach((controller, index) => {
+          if (index === currentSlide) {
+            controller.classList.add('active');
+          } else {
+            controller.classList.remove('active');
+          }
+        });
+        controlButtons[controlButtons.length - 2].setAttribute('aria-disabled', currentSlide === 0 ? "true" : "false");
+        controlButtons[controlButtons.length - 1].setAttribute('aria-disabled', currentSlide === slides.length - 1 ? "true" : "false");
+      }
+      controlButtons.forEach((button, index) => {
+        button.addEventListener('click', () => {
+          if (index < slides.length) {
+            currentSlide = index;
+            updateSlider();
+          } else {
+            if (button.getAttribute('aria-label') === "show previous slide" && currentSlide > 0) {
+              currentSlide--;
+            } else if (button.getAttribute('aria-label') === "show next slide" && currentSlide < slides.length - 1) {
+              currentSlide++;
+            }
+            updateSlider();
+          }
+        });
+      });
+      document.addEventListener('keydown', function (event) {
+        if (event.key === 'ArrowLeft' && currentSlide > 0) {
+          currentSlide--;
+          updateSlider();
+        } else if (event.key === 'ArrowRight' && currentSlide < slides.length - 1) {
+          currentSlide++;
+          updateSlider();
+        }
+      });
+
+      updateSlider();
+    });
+  </script>
+</body>
+
+</html>