From 2384f52a46b73da0490929bbb511b8215cda0d56 Mon Sep 17 00:00:00 2001
From: Tatiana Fokina <fokinatatian@gmail.com>
Date: Mon, 22 Jul 2024 21:29:05 +0400
Subject: [PATCH] =?UTF-8?q?=D0=90=D0=BA=D1=82=D1=83=D0=B0=D0=BB=D0=B8?=
 =?UTF-8?q?=D0=B7=D0=B8=D1=80=D1=83=D0=B5=D1=82=20=D0=BF=D1=80=D0=B8=D0=BC?=
 =?UTF-8?q?=D0=B5=D1=80=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 recipes/slider/index.md | 32 ++++++++++++++++++++++----------
 1 file changed, 22 insertions(+), 10 deletions(-)

diff --git a/recipes/slider/index.md b/recipes/slider/index.md
index 81ee8a976e..d4eab804da 100644
--- a/recipes/slider/index.md
+++ b/recipes/slider/index.md
@@ -214,8 +214,10 @@ tags:
 }
 
 .slide-img {
+  display: block;
   inline-size: 100%;
   block-size: 225px;
+  max-block-size: 225px;
   object-fit: cover;
 }
 
@@ -233,9 +235,14 @@ tags:
 }
 
 .slide {
+  display: none;
   text-align: center;
 }
 
+.slide--active {
+  display: block;
+}
+
 @media (max-width: 768px) {
   .slider {
     max-inline-size: 260px;
@@ -261,6 +268,7 @@ tags:
 document.addEventListener('DOMContentLoaded', function () {
   const slider = document.querySelector('.slider')
   const slides = slider.querySelectorAll('.slide')
+  const activeSlides = 'slide--active'
   const slideCount = slides.length
   const controlButtons = slider.querySelectorAll('.button-radio')
   const prevButton = slider.querySelector('.button-prev')
@@ -272,7 +280,11 @@ document.addEventListener('DOMContentLoaded', function () {
 
   function updateSlider() {
     slides.forEach((slide, index) => {
-      slide.hidden = index !== currentSlide
+      if(index === currentSlide) {
+        slide.classList.add(activeSlides)
+      } else {
+        slide.classList.remove(activeSlides)
+      }
     })
 
     controlButtons.forEach((button, index) => {
@@ -450,13 +462,13 @@ document.addEventListener('DOMContentLoaded', function () {
 </div>
 ```
 
-Слайды, которые не видны, скрываем не только визуально, но и для пользователей вспомогательных технологий. Для этого используем HTML-атрибут [`hidden`](/html/hidden/). Атрибут добавляем не сразу, а с помощью JavaScript только после окончания парсинга страницы.
+Слайды, которые не видны, скрываем не только визуально, но и для пользователей вспомогательных технологий. Для этого используем CSS-свойство [`display: none`](/css/display/) для всех слайдов по умолчанию. Для активного слайда добавим класс `.slide--active` с другим значением у `display` — `none`.
 
 Это активный слайд:
 
 ```html
 <div
-  class="slide"
+  class="slide slide--active"
   role="group"
   aria-labelledby="item-1-label"
   id="carousel-item-1"
@@ -465,7 +477,7 @@ document.addEventListener('DOMContentLoaded', function () {
 </div>
 ```
 
-А это скрытый слайд:
+А это все скрытые слайды:
 
 ```html
 <div
@@ -473,7 +485,6 @@ document.addEventListener('DOMContentLoaded', function () {
   role="group"
   aria-labelledby="item-2-label"
   id="carousel-item-2"
-  hidden
 >
   <!-- Содержимое слайда -->
 </div>
@@ -644,10 +655,15 @@ document.addEventListener('DOMContentLoaded', function () {
 ```javascript
 const slider = document.querySelector('.slider')
 const slides = slider.querySelectorAll('.slide')
+const activeSlides = 'slide--active'
 let currentSlide = 0
 
 slides.forEach((slide, index) => {
-  slide.hidden = index !== currentSlide
+  if(index === currentSlide) {
+    slide.classList.add(activeSlides)
+  } else {
+    slide.classList.remove(activeSlides)
+  }
 })
 ```
 
@@ -665,10 +681,6 @@ const currentButton = 'aria-current'
 let currentSlide = 0
 
 function updateSlider() {
-  slides.forEach((slide, index) => {
-    slide.hidden = index !== currentSlide
-  })
-
   controlButtons.forEach((button, index) => {
     if (index === currentSlide) {
       button.classList.add(activeButton)