Как сделать чтобы по кнопке перелистывались дивы

@trofey2 · Регистрация: 28.12.2015

Студворк — интернет-сервис помощи студентам

добрый день. нужно чтобы по кнопке вперед и назад листались отзывы, чуть ниже надписи "что о нас говорят клиенты"
вот тут готовый сайт - https://live.verstaem.online/pravozashhitnik/
я попытался сделать но у меня даже див не летит а вместо него сама кнопка летит...
приношу извинения за бесконечные вопросы, но я что-то никак с этими анимациями сам думать не научусь

прикладываю архив с сайтом потому что если я вставляю код то пишет что слишком длинное сообщение

@mr_dramm · 10.05.2025, 09:34

Сообщение от trofey2

прикладываю архив с сайтом потому что если я вставляю код то пишет что слишком длинное сообщение

Рекомендуется показывать минимальный объем кода для воспроизведения вашей проблемы.

Сообщение от trofey2

я попытался сделать но у меня даже див не летит а вместо него сама кнопка летит...
приношу извинения за бесконечные вопросы, но я что-то никак с этими анимациями сам думать не научусь

Вы пытаетесь верстать сайт используя только свой опыт, но можно улучшить опыт если сначала сверстать и потом посмотреть как сделал автор и сделать анализ.

Очень рекомендуется: Для того чтобы изучить верстку чужого сайта нужно использовать devtools(встроенный инструмент в браузер вызыывается с помощью нажатия кнопки f12).

Хорошо, что Вы используете flex, но используете не в полную силу. Отзывы оформлены как элемент "слайдер". Кнопки слайдера нужно сделать с помощью элемента button, элемент "a" используется если нужна работа с URL.

Проблемы:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.clients_angle {
    display: flex;
    /* flex-direction: row; это значение по умолчанию для flex-direction */
    justify-content: space-between;
    align-items: center; /* а это нужно для того чтобы выровнять по вертикали левый и правый блок*/
}
 
.angle90 {
    /* padding-top: 70px; не понятно зачем это тут тем более оно ломает верстку */
    width: 70px;
    height: 28px;
    display: flex
;
    /* flex-direction: row; */
    gap: 5px;
}

и конечно так анимация не сработает, потому что тут нет ничего связанного с анимацией и стили применяется к кнопке поэтому она меняет свое положение

CSS
1
2
3
4
       .angle90 .back_button:active {
            position: absolute;
            transform: translate(-300px, 0px);
        }

на готовом сайте используется библиотека Swiper

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const reviewsSlider = new Swiper('.reviews-slider .swiper', {
    spaceBetween: 24,
    autoHeight: true,
    breakpoints: {
        320: {
            slidesPerView: 1,
            spaceBetween: 24,
        },
        750: {
            slidesPerView: 1.3,
 
        },
        1289: {
            slidesPerView: 2,
        }
    },
 
      // Navigation arrows
    navigation: {
        nextEl: '.reviews-slider-next',
        prevEl: '.reviews-slider-prev',
    },
})

Я не поленился(желаю и Вам того же) написать минимальный объем кода для того чтобы можно было дальше доделывать и написал комментарии к верстке на основе моего опыта
Также оставлю ссылку на пример слайдера с анимацией на чистом js

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
 
    :root {
        /*  */
        --block-margin: 10px;
        /* для тестового примера одна высота для всех заголовков, 
      в реальном зависит от дизайна и опыта разработчика
      альтернативно можно использовать скалирование 
      calc(var(--block-header-height) * 2)  
      тоже самое касается и --block-margin*/
        --block-header-height: 40px;
    }
 
    .container {
        max-width: 900px;
        margin: 0 auto;
    }
 
    .reviews {
        /*   тут можно зада что то специфичное именно для секции reviews например фон */
    }
 
    .section-block {
        /*  что-то типичное для каждой секции например поля для каждой секции */
    }
 
    .section-header {
        display: flex;
        justify-content: space-between;
        /*   выравниваем блок заголовка и кнопок по вертикали     */
        align-items: center;
        /* с помощью внешнего отступа (margin-bottom) указываем отступ между блоками */
        margin-bottom: var(--block-margin);
        height: var(--block-header-height);
        /* border только для демонстрации выравнивания */
        border: solid;
    }
 
    .review {
        width: 400px;
        height: 300px;
        flex-shrink: 0;
        border: solid;
        display: flex;
        flex-direction: column;
    }
 
    .review-header {
        display: flex;
        height: var(--block-header-height);
        flex-shrink: 0;
        margin-bottom: var(--block-margin);
    }
 
    .review-header .user-avatar,
    .review-header .user-info {
        height: 100%;
    }
 
    .review-header .user-avatar {
        border-radius: 100%;
        background: gray;
        width: var(--block-header-height);
    }
 
    .review-header .user-info {
        background: gray;
        margin-left: var(--block-margin);
        flex: 1;
    }
 
    .review .review-text {
        flex: 1;
        background: gray;
    }
 
    .slider-items {
        overflow: hidden;
    }
 
    .slider-btns {
        display: flex;
        gap: var(--block-margin);
    }
 
    .reviews-items {
        display: flex;
        gap: var(--block-margin);
    }
    </style>
</head>
 
<body>
    <div class="container">
        <section class="reviews section-block">
            <div class="section-header">
                <h1 class="title">Отзывы</h1>
                <div class="slider-btns">
                    <!-- Для примера достаточно просто <>/ 
                    на рельном сайте используются обычно SVG-иконки 
                    или Unicode -->
                    <button class="slider-left" aria-label="Предыдущий отзыв">
                        < 
                    </button> 
                        / 
                    <button class="slider-right" aria-label="Спедующий отзыв">
                        >
                    </button>
                </div>
            </div>
            <div class="section-content slider-items">
                <div class="reviews-items">
                    <!-- review семантический блок -->
                    <article class="review">
                        <div class="review-header">
                            <div class="user-avatar"></div>
                            <div class="user-info"></div>
                        </div>
                        <div class="review-text"></div>
                    </article>
                    <article class="review">
                        <div class="review-header">
                            <div class="user-avatar"></div>
                            <div class="user-info"></div>
                        </div>
                        <div class="review-text"></div>
                    </article>
                    <article class="review">
                        <div class="review-header">
                            <div class="user-avatar"></div>
                            <div class="user-info"></div>
                        </div>
                        <div class="review-text"></div>
                    </article>
                </div>
            </div>
        </section>
    </div>
</body>
 
</html>

@trofey2 · 12.05.2025, 12:26 **[ТС]**

спасибо большое. java script я пока еще не изучал, но попробую разобраться с вашим кодом, видимо уже пора

Добавлено через 36 минут
а ваш код это чисто css с html? только оно у вас не слайдится что самое главное

@mr_dramm · 12.05.2025, 21:14

Сообщение от trofey2

а ваш код это чисто css с html? только оно у вас не слайдится что самое главное

Да, так и есть, я надеялся что Вы его доделаете. Для этого оставил ссылку на слайдер, который работает один в один как тот что Вам нужен.

Для изучения js html css оставлю ссылки на пару сайтов learn.javascript.ru и doka.guide с актуальными онлайн учебниками

Оставлю решение смотреть его или сделать самому решайте сами

Кликните здесь для просмотра всего текста

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
 
      :root {
        /*  */
        --block-margin: 10px;
        /* для тестового примера одна высота для всех заголовков, 
      в реальном зависит от дизайна и опыта разработчика
      альтернативно можно использовать скалирование 
      calc(var(--block-header-height) * 2)  
      тоже самое касается и --block-margin*/
        --block-header-height: 40px;
        --container-width: 900px;
      }
 
      .container {
        width: var(--container-width);
        margin: 0 auto;
      }
 
      .reviews {
        /*   тут можно зада что то специфичное именно для секции reviews например фон */
      }
 
      .section-block {
        /*  что-то типичное для каждой секции например поля для каждой секции */
      }
 
      .section-header {
        display: flex;
        justify-content: space-between;
        /*   выравниваем блок заголовка и кнопок по вертикали     */
        align-items: center;
        /* с помощью внешнего отступа (margin-bottom) указываем отступ между блоками */
        margin-bottom: var(--block-margin);
        height: var(--block-header-height);
        /* border только для демонстрации выравнивания */
        border: solid;
      }
 
      .review {
        /* хотим уместить два отзыва на страницу */
        width: calc(var(--container-width) / 2 - var(--block-margin) / 2);
        height: 300px;
        flex-shrink: 0;
        border: solid;
        display: flex;
        flex-direction: column;
      }
 
      .review-header {
        display: flex;
        height: var(--block-header-height);
        flex-shrink: 0;
        margin-bottom: var(--block-margin);
      }
 
      .review-header .user-avatar,
      .review-header .user-info {
        height: 100%;
      }
 
      .review-header .user-avatar {
        border-radius: 100%;
        background: gray;
        width: var(--block-header-height);
      }
 
      .review-header .user-info {
        background: gray;
        margin-left: var(--block-margin);
        flex: 1;
      }
 
      .review .review-text {
        flex: 1;
        background: gray;
      }
 
      .slider-items {
        overflow: hidden;
      }
 
      .slider-btns,
      .reviews-items {
        display: flex;
        gap: var(--block-margin);
      }
 
      .reviews-items {
        /* анимация с помощью transition */
        transform: translateX(0);
        transition: transform 300ms linear;
      }
    </style>
  </head>
 
  <body>
    <template id="block-review">
      <article class="review">
        <div class="review-header">
          <div class="user-avatar"></div>
          <div class="user-info"></div>
        </div>
        <div class="review-text"></div>
      </article>
    </template>
    <div class="container">
      <section class="reviews section-block">
        <div class="section-header">
          <h1 class="title">Отзывы</h1>
          <div class="slider-btns">
            <!-- Для примера достаточно просто <>/ 
                    на рельном сайте используются обычно SVG-иконки 
                    или Unicode -->
            <button class="slide-prev" aria-label="Предыдущий отзыв"><</button>
            /
            <button class="slide-next" aria-label="Спедующий отзыв">></button>
          </div>
        </div>
        <div class="section-content slider-items">
          <div class="reviews-items">
            <!-- тут будут отзывы созданные динамически с помощью js из брока template -->
          </div>
        </div>
      </section>
    </div>
    <script>
      const btnPrev = document.querySelector(".slider-btns .slide-prev"),
        btnNext = document.querySelector(".slider-btns .slide-next"),
        reviewsItems = document.querySelector(".reviews-items"),
        template = document.getElementById("block-review").content;
 
      // количество отзывов
      const n = 4;
 
      for (let i = 0; i < n; i++) {
        reviewsItems.appendChild(template.cloneNode(true));
        reviewsItems.children[i].querySelector(".user-info").innerHTML =
          "user" + (i + 1);
      }
 
      const reviewWidth = reviewsItems.children[0].offsetWidth,
        gap = reviewsItems.children[1].offsetLeft - reviewWidth;
 
      let current = 0;
      // m +1 вперед -1 назад
      const slide = (m) => {
        current += m;
        if (current > n - 2) current = 0;
        if (current < 0) current = n - 2;
        reviewsItems.style.transform = `translateX(-${
          current * reviewWidth + current * gap
        }px)`;
      };
      btnPrev.addEventListener("click", () => slide(-1));
      btnNext.addEventListener("click", () => slide(1));
    </script>
  </body>
</html>

@trofey2 · 13.05.2025, 15:20 **[ТС]**

спасибо. прикручу это к сайту а потом буду видимо javascript учить

а что такое --block-margin, --block-header-? в гугле даже ищещь и ничего не находит
--container-width еще туда же

Добавлено через 47 минут
и не понятно вот я например в

HTML5
1
2
3
<div class="user-avatar">
                        <img src="img/anastasia.png" alt="Логинова Анастасия" width="80px" height="80px">
                    </div>

пишу картинку аватара, а она на два отзыва сразу видимых используется, как каждый отзыв отдельно забить?

а сюда

HTML5
1
<div class="user-info">

пишешь тут инфо по аватару вообще не видно что пишешь

Добавлено через 2 часа 33 минуты
еще вопрос вот у вас кнопки которыми страницы перелистываются сделаны как button и они видны как кнопки а я вместо скобки туда картинку вставил но она все равно как кнопка я добавил фон но все равно как кнопка

CSS
1
2
3
.slide-prev {
        background-color: #ffffff;
      }

как ее сделать чтобы просто как картинка она была?

@voraa · 13.05.2025, 17:39

Сообщение от trofey2

а что такое --block-margin, --block-header-?

Это переменные в CSS. Они всегда начинаются с --. И что бы вставить значение в нужном месте используется конструкция
var(--переменная)
См https://developer.mozilla.org/... properties

Добавлено через 6 минут

Сообщение от trofey2

как ее сделать чтобы просто как картинка она была?

Убрать (переопределить) стили для кнопки - границы и все остальное.

@mr_dramm · 13.05.2025, 17:58

Сообщение от trofey2

пишу картинку аватара, а она на два отзыва сразу видимых используется, как каждый отзыв отдельно забить?

Сообщение от trofey2

пишешь тут инфо по аватару вообще не видно что пишешь

Если используете пример с анимацией, то указывайте url картинки и описание .user-info в этом цикле

JavaScript
1
2
3
4
5
      for (let i = 0; i < n; i++) {
        reviewsItems.appendChild(template.cloneNode(true));
        reviewsItems.children[i].querySelector(".user-info").innerHTML =
          "user" + (i + 1);
      }

альтернативно можно отказаться от использования template, и размещать отзывы непосредственно в блоке reviews-items

PHP/HTML
1
2
3
4
5
        <div class="section-content slider-items">
          <div class="reviews-items">
            <!-- скопировать сюда содержимое блока template отдельно для каждого отзыва -->
          </div>
        </div

, но тогда нужно переписать js заменить строчки

JavaScript
1
2
3
4
5
6
7
8
      // количество отзывов
      const n = 4;
 
      for (let i = 0; i < n; i++) {
        reviewsItems.appendChild(template.cloneNode(true));
        reviewsItems.children[i].querySelector(".user-info").innerHTML =
          "user" + (i + 1);
      }

на

JavaScript
1
2
      // количество отзывов
      const n = reviewsItems.children.length

Сообщение от trofey2

еще вопрос вот у вас кнопки которыми страницы перелистываются сделаны как button и они видны как кнопки а я вместо скобки туда картинку вставил но она все равно как кнопка я добавил фон но все равно как кнопка ... как ее сделать чтобы просто как картинка она была?

Сделать картинку в кнопке можно например напимер так

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Кнопка с изображением</title>
    <style>
        .button-with-image {
            background-color: transparent; 
            border: none; 
            cursor: pointer; 
            padding: 0;
        }
        .button-with-image img {
            width: 200px; 
            height: auto;
/*
У строчных элементов есть спуски (inline descenders), 
по этой причине картинки нужно делать display: block, 
иначе снизу картинки останется несколько пикселей отступа до следующего блока.
в этом примере это не играет роли так как у кнопки выставлен background-color: transparent; 
но в некоторых случаях может быть полезно
*/
            display: block;
        }
    </style>
</head>
<body>
 
<button class="button-with-image">
    <img src="https://placehold.co/200x100" alt="Описание изображения">
</button>
 
</body>
</html>

Дополнительно прочитаейте про сброс стилей браузера например эту статью, особенно про отступы которые добавялются для inline элементов немного старая статья, но по большей части актуальная

@trofey2 · 14.05.2025, 16:49 **[ТС]**

Сообщение от mr_dramm

Если используете пример с анимацией, то указывайте url картинки и описание .user-info в этом цикле

я в java script'e ничего не понимаю, куда писать инфу (картинку аватара с описанием) скажите пожалуйста конкретнее

@mr_dramm · 14.05.2025, 21:20

Сообщение от trofey2

я в java script'e ничего не понимаю

даже если Вы сверстаете этот макет, то необходимость в понимании js не отпадет, потому что без js будет трудно в frontend. В этом макете js было очень мало и он очень простой, но это уже создало трудности для Вас. Во многих макетах есть ленивая загрузка, работа с графиками, сложной анимацией и т.д. , это все будет с более сложным js.

Не торопитесь сделать быстро и ничего не понять

Сообщение от trofey2

куда писать инфу (картинку аватара с описанием) скажите пожалуйста конкретнее

я написал

Сообщение от mr_dramm

размещать отзывы непосредственно в блоке reviews-items

и далее по тексту

тут решение

Кликните здесь для просмотра всего текста

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
 
      :root {
        /*  */
        --block-margin: 10px;
        /* для тестового примера одна высота для всех заголовков, 
      в реальном зависит от дизайна и опыта разработчика
      альтернативно можно использовать скалирование 
      calc(var(--block-header-height) * 2)  
      тоже самое касается и --block-margin*/
        --block-header-height: 40px;
        --container-width: 900px;
      }
 
      .container {
        width: var(--container-width);
        margin: 0 auto;
      }
 
      .reviews {
        /*   тут можно зада что то специфичное именно для секции reviews например фон */
      }
 
      .section-block {
        /*  что-то типичное для каждой секции например поля для каждой секции */
      }
 
      .section-header {
        display: flex;
        justify-content: space-between;
        /*   выравниваем блок заголовка и кнопок по вертикали     */
        align-items: center;
        /* с помощью внешнего отступа (margin-bottom) указываем отступ между блоками */
        margin-bottom: var(--block-margin);
        height: var(--block-header-height);
        /* border только для демонстрации выравнивания */
        border: solid;
      }
 
      .review {
        /* хотим уместить два отзыва на страницу */
        width: calc(var(--container-width) / 2 - var(--block-margin) / 2);
        height: 300px;
        flex-shrink: 0;
        border: solid;
        display: flex;
        flex-direction: column;
      }
 
      .review-header {
        display: flex;
        height: var(--block-header-height);
        flex-shrink: 0;
        margin-bottom: var(--block-margin);
      }
 
      .review-header .user-avatar,
      .review-header .user-info {
        height: 100%;
      }
 
      .review-header .user-avatar {
        border-radius: 100%;
        background: gray;
        width: var(--block-header-height);
      }
      .user-avatar{
        overflow: hidden;
      }
      .avatar-img {
        width: 100%;
        height: auto;
        display: block;
      }
      .review-header .user-info {
        background: gray;
        margin-left: var(--block-margin);
        flex: 1;
      }
 
      .review .review-text {
        flex: 1;
        background: gray;
      }
 
      .slider-items {
        overflow: hidden;
      }
 
      .slider-btns,
      .reviews-items {
        display: flex;
        gap: var(--block-margin);
      }
 
      .reviews-items {
        /* анимация с помощью transition */
        transform: translateX(0);
        transition: transform 300ms linear;
      }
    </style>
  </head>
 
  <body>
    <template id="block-review">
      <article class="review">
        <div class="review-header">
          <div class="user-avatar"></div>
          <div class="user-info"></div>
        </div>
        <div class="review-text"></div>
      </article>
    </template>
    <div class="container">
      <section class="reviews section-block">
        <div class="section-header">
          <h1 class="title">Отзывы</h1>
          <div class="slider-btns">
            <!-- Для примера достаточно просто <>/ 
                    на рельном сайте используются обычно SVG-иконки 
                    или Unicode -->
            <button class="slide-prev" aria-label="Предыдущий отзыв"><</button>
            /
            <button class="slide-next" aria-label="Спедующий отзыв">></button>
          </div>
        </div>
        <div class="section-content slider-items">
          <div class="reviews-items">
            <article class="review">
              <div class="review-header">
                <div class="user-avatar">
                  <img
                    class="avatar-img"
                    src="https://placehold.co/100x100"
                    alt="Аватар пользователя user1"
                  />
                </div>
                <div class="user-info">user1</div>
              </div>
              <div class="review-text"></div>
            </article>
            <article class="review">
              <div class="review-header">
                <div class="user-avatar">
                  <img
                    class="avatar-img"
                    src="https://placehold.co/100x100"
                    alt="Аватар пользователя user2"
                  />
                </div>
                <div class="user-info">user2</div>
              </div>
              <div class="review-text"></div>
            </article>
 
            <article class="review">
              <div class="review-header">
                <div class="user-avatar">
                  <img
                    class="avatar-img"
                    src="https://placehold.co/100x100"
                    alt="Аватар пользователя user3"
                  />
                </div>
                <div class="user-info">user3</div>
              </div>
              <div class="review-text"></div>
            </article>
            <article class="review">
              <div class="review-header">
                <div class="user-avatar">
                  <img
                    class="avatar-img"
                    src="https://placehold.co/100x100"
                    alt="Аватар пользователя user4"
                  />
                </div>
                <div class="user-info">user4</div>
              </div>
              <div class="review-text"></div>
            </article>
          </div>
        </div>
      </section>
    </div>
    <script>
      const btnPrev = document.querySelector(".slider-btns .slide-prev"),
        btnNext = document.querySelector(".slider-btns .slide-next"),
        reviewsItems = document.querySelector(".reviews-items"),
        template = document.getElementById("block-review").content;
 
      const reviewWidth = reviewsItems.children[0].offsetWidth,
        gap = reviewsItems.children[1].offsetLeft - reviewWidth;
      const n = reviewsItems.children.length;
      let current = 0;
      // m +1 вперед -1 назад
      const slide = (m) => {
        current += m;
        if (current > n - 2) current = 0;
        if (current < 0) current = n - 2;
        reviewsItems.style.transform = `translateX(-${
          (reviewWidth + gap) * current
        }px)`;
      };
      btnPrev.addEventListener("click", () => slide(-1));
      btnNext.addEventListener("click", () => slide(1));
    </script>
  </body>
</html>

@trofey2 · 15.05.2025, 15:09 **[ТС]**

Сообщение от mr_dramm

Не торопитесь сделать быстро и ничего не понять

спасибо что показали как сделать разные отзывы. я просто и хтмл с цсс не очень знаю, думал сначала их подтянуть, или вы считаете что лучше пораньше java script начать учить?

@mr_dramm · 16.05.2025, 14:10

Сообщение от trofey2

я просто и хтмл с цсс не очень знаю, думал сначала их подтянуть, или вы считаете что лучше пораньше java script начать учить?

Лучше всего изучать HTML, CSS и JavaScript в связке, но с правильным поэтапным подходом, так как они тесно связаны друг с другом.

Рекомендую пройти курсы платные или бесплатные решайте сами. Курсы выстраивают логическую цепочку от простого к сложному и в курсах есть задания и проекты, которые помогают закреплять знания. На курсах часто есть наставники. Некотрые платные курсы обещают помощь в трудоустройстве

Также есть много сайтов с задачами, которые можно найти по словосочетанию frontend problems / contests / challenges

Frontend это не только языки, а также экосистема библиотек / инструментов / технологий.

При возникновении недопонимания или сомнения можно найти ответ в первоисточнике :
- HTML Living Standard (WHATWG)
- ECMAScript спецификация (JavaScript)
- CSS спецификации (W3C) – самый сложный язык по сравнению с HTML и JS по объему и частоте обновления, рекомендуется сначала найти то что нужно на сайте MDN, а там найти ссылку на нужную спецификацию. Также у него есть препроцессоры и постпроцессоры, и много техник встраивания стилей на сайт: css modules, tailwind, css in js и т.д. И приплюсуем к этом библиотеки стилизации так что это наверное будет сложность от проекта к проекту постоянная.

@trofey2 · 23.05.2025, 15:35 **[ТС]**

Сообщение от mr_dramm

Также есть много сайтов с задачами, которые можно найти по словосочетанию frontend problems / contests / challenges

а на русском таких сайтов нет?

Новые блоги и статьи Все статьи Все блоги /
сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .
Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .	Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и напряжениями. Надо найти токи в ветвях. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и решает её. Последовательность действий:. . .

@trofey2 0 / 0 / 0 Регистрация: 28.12.2015 Сообщений: 219
	12.05.2025, 12:26 [ТС]
	спасибо большое. java script я пока еще не изучал, но попробую разобраться с вашим кодом, видимо уже пора Добавлено через 36 минут а ваш код это чисто css с html? только оно у вас не слайдится что самое главное 0

Как сделать чтобы по кнопке перелистывались дивы

Решение