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

Co-authored-by: Alena Batitskaia <solarrust@users.noreply.github.com>
---
 recipes/slider/index.md | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/recipes/slider/index.md b/recipes/slider/index.md
index 2a11d27c4f..ac3a3e4e0a 100644
--- a/recipes/slider/index.md
+++ b/recipes/slider/index.md
@@ -186,7 +186,7 @@ tags:
 .button-prev,
 .button-next {
   position: absolute;
-  top: 50%;
+  inset-block-start: 50%;
   transform: translateY(-50%);
   border: none;
   inline-size: 30px;
@@ -247,11 +247,11 @@ tags:
   }
 
   .button-prev {
-    left: -40px;
+    inset-inline-start: -40px;
   }
 
   .button-next {
-    right: -40px;
+    inset-inline-end: -40px;
   }
 }
 ```
@@ -361,7 +361,7 @@ document.addEventListener('DOMContentLoaded', function () {
 >
 </button>
 
-<!-- Остальные кнопки >
+<!-- Остальные кнопки -->
 ```
 
 Расположение элементов в [DOM](/js/dom/) (Document Object Model) влияет на порядок, в котором пользователи клавиатуры перемещаются по странице. По этой причине располагаем элементы навигации перед слайдером, а не после него. В этом случае пользователю не нужно будет возвращаться назад, чтобы прокрутить слайды:
@@ -542,8 +542,8 @@ document.addEventListener('DOMContentLoaded', function () {
   display: flex;
   flex-direction: column;
   align-items: center;
-  max-width: 600px;
-  width: 100%;
+  max-inline-size: 600px;
+  inline-size: 100%;
   position: relative;
 }
 ```
@@ -590,13 +590,13 @@ document.addEventListener('DOMContentLoaded', function () {
 }
 ```
 
-Кнопки для предыдущего и следующего слайда позиционируем с помощью `position: absolute` и отрицательных `left` и `right` соответственно. Стрелки добавляем через свойство `background-image`.
+Кнопки для предыдущего и следующего слайда позиционируем с помощью [`position: absolute`](/css/position/) и отрицательных значений для [`inset-inline-start`](/css/inset/) и [`inset-inline-end`](/css/inset/) соответственно. Стрелки добавляем через свойство [`background-image`](/css/background-image/).
 
 ```css
 .prev-button,
 .next-button {
   position: absolute;
-  top: 50%;
+  inset-block-start: 50%;
   transform: translateY(-50%);
   border: none;
   inline-size: 30px;